首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用Flutter中的ToggleButton在两个有状态小部件之间切换,同时保持在同一位置

在Flutter中,可以使用ToggleButton在两个有状态小部件之间切换,并保持在同一位置。ToggleButton是一个开关按钮,可以在两个状态之间切换,比如开和关。

要在Flutter中使用ToggleButton,可以按照以下步骤进行操作:

  1. 导入所需的包:
代码语言:txt
复制
import 'package:flutter/material.dart';
  1. 创建一个有状态的小部件(StatefulWidget):
代码语言:txt
复制
class ToggleButtonExample extends StatefulWidget {
  @override
  _ToggleButtonExampleState createState() => _ToggleButtonExampleState();
}
  1. 创建该有状态小部件的状态类:
代码语言:txt
复制
class _ToggleButtonExampleState extends State<ToggleButtonExample> {
  bool _isToggled = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Toggle Button Example'),
      ),
      body: Center(
        child: ToggleButtons(
          children: <Widget>[
            Icon(Icons.favorite),
            Icon(Icons.favorite_border),
          ],
          isSelected: [_isToggled],
          onPressed: (index) {
            setState(() {
              _isToggled = !_isToggled;
            });
          },
        ),
      ),
    );
  }
}
  1. 在主函数中运行该有状态小部件:
代码语言:txt
复制
void main() {
  runApp(MaterialApp(
    home: ToggleButtonExample(),
  ));
}

在上述代码中,我们创建了一个名为ToggleButtonExample的有状态小部件。该小部件包含一个布尔类型的变量_isToggled,用于表示ToggleButton的状态。在build方法中,我们使用ToggleButtons小部件创建了一个开关按钮,其中包含两个图标:一个是已选中状态的心形图标,另一个是未选中状态的心形边框图标。isSelected属性接受一个布尔类型的列表,用于指定ToggleButton的状态。onPressed回调函数在按钮被点击时触发,通过调用setState方法来更新_isToggled变量的值,从而切换ToggleButton的状态。

这是一个简单的使用ToggleButton在两个有状态小部件之间切换的示例。你可以根据自己的需求进行修改和扩展。

推荐的腾讯云相关产品:腾讯云移动开发平台(https://cloud.tencent.com/product/mpp)

希望这个答案能够满足你的需求,如果还有其他问题,请随时提问。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter应用程序添加交互性 顶

如何创建自定义小部件。 无状态状态部件之间区别。 你如何修改你应用程序,使其对用户输入做出反应? 本教程,您将为仅包含非交互式小部件应用添加交互性。...为了实现这一点,您将创建一个包含星号和计数自定义小部件,它们都是小部件。 因为点击明星会更改这两个部件状态,所以同一个小部件应该同时管理这两个部件。...当小部件状态改变时,状态对象调用setState(),告诉框架重绘小部件本节,您将创建一个自定义状态部件。...您将使用一个自定义状态部件替换两个状态部件 - 纯红星和其旁边数字计数 - 该小部件两个部件管理一行:IconButton和Text。...在这个例子切换星号是一个独立操作,不会影响父窗口小部件或其他用户界面,因此窗口小部件可以在内部处理它状态管理状态中了解更多关于窗口小部件状态分离以及如何管理状态信息。

4.2K20

【Java 进阶篇】JQuery 事件绑定之事件切换:让页面动起来

无论你是前端小白还是一定经验开发者,相信这篇文章都会对你有所帮助。 走进事件切换奇妙世界 事件切换是 JQuery 提供一项强大功能,它使得我们可以同一个元素上轻松切换不同事件处理函数。...这个方法接受两个或多个函数作为参数,每次触发事件时,它会依次调用这些函数。这就意味着,你可以同一个元素上定义多个不同事件处理逻辑。 让我们通过一个简单例子来看看基本语法: <!...使用 toggle 切换多个事件 toggle 方法不仅可以切换多个处理函数,还可以切换多个事件类型。这意味着你可以同一个元素上,同时切换点击事件、悬停事件等多种事件。 <!...提示框,第二次点击弹出 “第二次点击!”,悬停时弹出 “悬停事件!”。 利用 data 存储状态 实际项目中,有时我们需要在不同事件处理函数之间共享一些状态。...每次点击按钮时,根据当前状态不同,会弹出不同提示框,并修改状态值。另外,我们通过点击事件展示了如何获取当前状态切换 CSS 类 页面交互,改变样式是常见需求之一。

13520

开始使用-编写你第一个Flutter应用程序 顶

第1步:创建起始Flutter应用程序 第2步:使用外部包装 第3步:添加一个状态部件 第4步:创建一个无限滚动ListView 第5步:添加交互性 第6步:导航到新屏幕 第7步:使用主题更改UI...lib/main.dart 第3步:添加一个状态部件状态部件是不可变,这意味着它们属性不能改变 - 所有的值都是最终状态部件保持在部件生命周期中可能改变状态。...实现一个状态部件至少需要两个类:1)一个StatefulWidget类,它创建一个2)一个State类实例。...在这一步,您将添加一个状态部件RandomWords,它创建其状态类RandomWordsState。 State类将最终维护小部件建议和最喜欢单词对。...1.将有状态RandomWords小部件添加到main.dart。 它可以MyApp之外文件任何位置使用,但解决方案将它放在文件底部。

9.5K20

Flutter 1.22 正式发布

仍在使用v1 API旧版应用程序构建过程中将显示弃用警告,该警告指向支持新Android插件API文档 同时,如果您仍然基于v1 Android APIFlutter应用程序,它将继续运行。...同样,了此PR,Flutter所在项目中,字符包均可自动项目中使用,而无需手动添加。希望这使得处理来自所有语言环境各种字符串变得更加容易。...这个想法是要在导航和Flutter其余部分之间统一模型,同时解决许多问题并添加功能。实际上,这个例子几乎不涉及Navigator 2.0内容。...此外,收集到数据还可以作为JSON文件使用,供Dart DevTools使用,它使您可以按照flutter.dev上说明进一步浏览应用程序内容,查明大小问题并查看两个不同JSON文件之间更改。...EasyA联合创始人Phil Kwok 重大变化 与往常一样,我们试图将重大更改数量保持在最少。以下是Flutter 1.22版本列表。

7.4K20

Windows 8.1 应用再出发 - 几种常用控件

本篇为大家简单介绍Windows 商店应用控件用法,为方便讲解,我们文本控件和按钮控件这两类中分别挑选代表性控件进行详细说明。 1....None:使用来自字体版式值侧方位,TrimSideBearings:不使用来自字体版式值边位,且不将字形一侧与字形"墨迹"部分开始位置对齐 TextAlignment  枚举值,指示文本内容水平对齐方式...    ToggleButton 是可以切换状态按钮,重点关注以下内容: IsThreeState  布尔值,指示控件是否支持三个状态值。...,同一GroupNameRadioButton不能同时被选中。...注意如果同一GroupName控件同时设置为true,则后面的控件选中状态会覆盖前面的。

2.2K40

Flutter Widget框架之旅 顶

您可以多个Expanded子项,并使用Expandedflex参数确定它们占用可用空间比率。 MyScaffold小部件垂直列组织其子女。...Scaffold小部件将许多不同部件作为命名参数,每个小部件放置适当位置Scaffold布局。...Flutter,这两种类型对象具有不同生命周期。 小部件是临时对象,用于构建当前状态应用程序演示文稿。 另一方面,State对象调用build()之间是持久,允许它们记住信息。...它将它在构造函数接收到值存储final成员变量,然后build函数中使用它。例如,inCart布尔值可以两个可视外观之间切换:一个使用当前主题主要颜色,另一个使用灰色。...此外,语义上同步条目意味着保留在有状态部件状态将保持附加到相同语义条目而不是视口中相同数字位置条目。 全局Key 主要文章:GlobalKey 您可以使用全局键来唯一标识子窗口部件

6.7K20

Flutter常见开发问题

Flutter 应用程序仍然会比 Android 应用程序大一点,但它相当,而且 Flutter 团队一直寻找减少应用程序大小方法。...package和插件之间一个区别。包通常是纯粹用 Dart 编写新组件或代码,而插件则可以使用本机代码设备端提供更多功能。...setState() 本质上是一种告诉应用程序使用新值刷新和重建屏幕方法。 什么是状态和无状态部件? TL;DR:允许您刷新屏幕部件状态部件。没有状态部件是无状态。...更详细地说,一个内容可以改变动态小部件应该是一个状态部件。无状态部件只能在更改参数时更改内容,因此需要在小部件层次结构位置点上方完成。...包含静态内容屏幕或小部件应该是无状态部件,但要更改内容,需要有状态。 你如何处理 Flutter 代码缩进和结构?

6.8K30

Flutter常见开发问题

Flutter 应用程序仍然会比 Android 应用程序大一点,但它相当,而且 Flutter 团队一直寻找减少应用程序大小方法。...package和插件之间一个区别。包通常是纯粹用 Dart 编写新组件或代码,而插件则可以使用本机代码设备端提供更多功能。...setState() 本质上是一种告诉应用程序使用新值刷新和重建屏幕方法。 什么是状态和无状态部件? TL;DR:允许您刷新屏幕部件状态部件。没有状态部件是无状态。...更详细地说,一个内容可以改变动态小部件应该是一个状态部件。无状态部件只能在更改参数时更改内容,因此需要在小部件层次结构位置点上方完成。...包含静态内容屏幕或小部件应该是无状态部件,但要更改内容,需要有状态。 你如何处理 Flutter 代码缩进和结构?

6.7K20

超全Android组件及UI框架

:gravity表示button上button上位置。...android:layout_centerVertical    父容器垂直居中 android:layout_centerInParent    父容器居中位置 各个属性示意图如下:...ImageView 图像视图 3.1 常用属性 ImageView 2属性,分为为: src, backgroud,他们之间区别是: background 通常指都是 背景, 而 src 指的是...ToggleButton 开关按钮 8.1 常用属性 ToggleButton (开关按钮) 允许我们两个状态之间切换,有点类似于电灯开关 ToggleButton 和 CheckBox 一样都继承自...Switch 开关 9.1 常用属性 允许我们两个状态之间切换,有点类似于现在流行滑动解锁 Switch (开关) 也继承自 Button 和 CompoundButton,所以拥有它们属性、方法和事件

6K30

端开发技术——解密Flutter响应式布局

Flutter是一个跨平台应用开发框架,支持各种屏幕大小设备,它可以智能手表这样设备上运行,也可以电视这样大设备上运行。使用相同代码来适应不同屏幕大小和像素密度是一个挑战。...Android,你可以为不同屏幕大小定义不同布局文件,Android框架会根据设备屏幕大小自动处理这些布局之间切换。...iOS,为了控制多个视图控制器,使用了UISplitViewController,它在分层界面管理子视图控制器。 现在我们来到Flutter Flutter引入了widget概念。...您可以看到,Flutter创建分屏视图是非常容易,您只需使用一行将它们并排放置,然后为了填满整个空间,只需使用Expanded widget包装两个视图。...但是,如果您现在移动到一个特定屏幕,然后视图之间切换,那么您将丢失页面的上下文,也就是说您将始终返回到第一个页面,即“聊天”。为了解决这个问题,我使用了多个回调函数来返回所选页面到主页。

2.2K00

Flutter】自定义滚动开关

switch是两个状态UI组件,用于ON(选中)或OFF(未选中)状态之间切换。通常,它是带有拇指滑块按钮,用户可以在其中来回拖拉以选择其他选项,例如“开”或“关”。...它工作就像房子电源开关。 本文中,我们将探讨Flutter **Custom Rolling Switch in Flutter。...pub地址:https://pub.dev/packages/lite_rolling_switch 介绍 Flutter,开关是一个小部件,用于两种选择(ON或OFF)之间进行选择。...它显示了在用户按下按钮后进行切换交互,该开关将滚动到具有动画效果另一侧,并且滚动该开关时将更改图标和文本。...部件内,我们将添加一个列小部件。在此小部件,我们将添加mainAxisAlignment为center。在内部,我们将添加带有样式文本。

33.3K60

如何在flutter构建响应式布局(第五节)

使用相同代码库使您应用程序适应如此多样屏幕尺寸和像素密度始终是一个挑战。 Flutter 设计响应式布局没有硬性规定。本文中,我将向您展示一些设计此类布局时可以遵循方法。...[ Android ,您可以为不同屏幕尺寸定义 单独布局文件,Android 框架会根据设备屏幕尺寸自动处理这些布局之间切换。![ ?随时了解应用开发新闻 3. 片段 使用?...您可以一个 Activity 运行多个 Fragment,但不能同时单个应用程序运行多个 Activity。...基本上,它们是可以连接在一起以构建整个应用程序构建块。 请记住, Flutter ,每个屏幕甚至整个应用程序也是小部件!...可以看到, Flutter 创建拆分视图真的很容易。您只需使用 a 将它们并排放置Row,然后,为了填满整个空间,只需使用Expanded小部件包装两个视图。

2.7K10

Flutter UI原理

三种类别: layout布局: 例如。 列和行小部件使我们可以轻松地将其他小部件垂直或水平对齐。 Paiting绘画: 例如。 文本和图像小部件允许我们屏幕上显示(“绘制”)一些内容。...Flutter沿着小部件树向下走,并通过部件上调用createElement()来创建第二个包含相应Element对象树。...Element代表着Widget配置和在树特定位置,并保留对相关Widget和RenderObject引用。 为什么要有三棵树?...当Widget类型与以前相同时Flutter不需要重新创建昂贵RenderObject,只需更新其可变配置即可。...接下来,借助Elements树Elements帮助,Flutter将新Widgets树与旧Widegt树进行比较。 比较基本规则:检查旧Widget和新Widget是否来自同一类型。

3.2K20

【译】Flutter架构综述

开发过程Flutter应用运行在一个虚拟机,该虚拟机提供状态变化热重载,而不需要完全重新编译。...一种解决方案是像MVC这样方法,通过控制器将数据变化推送到模型,然后模型通过控制器将新状态推送到视图。然而,这也是问题,因为创建和更新UI元素是两个独立步骤,很容易不同步。...可能情况下,设计概念数量保持在最低限度,同时允许总词汇量很大。...随着应用程序增长,更先进状态管理方法,减少了创建和使用状态部件仪式,变得更有吸引力。...所有这些都会增加大量开销,特别是UI和应用逻辑之间大量交互地方。 相比之下,Flutter最大限度地减少了这些抽象,绕过系统UI小部件库而使用自己部件集。

5.5K10

ToggleButton和Switch使用大全

上期学习了CheckBox和RadioButton,那么本期来学习Button另外两个子控件ToggleButton和Switch,开发同样比较重要。...当用户两种状态间进行切换时会触发一个OnCheckedChange事件。 ToggleButton所支持XML属性和相关方法如下表所示。...:textOn 设置当该按钮状态打开时显示文本 接下来通过一个简单示例程序来学习ToggleButton使用用法。...为了监听按钮切换事件,Java代码为其添加事件监听器,具体代码如下: public class MainActivity extends AppCompatActivity { private...二、Switch Switch是一个可以两种状态切换之间切换开关控件。用户可以拖动来选择,也可以像选择复选框一样点击切换Switch状态

2.5K50

深入探究Flutter页面导航器:Navigator详解

Navigator基础 Flutter,Navigator是用来管理应用程序页面导航组件。它负责维护页面堆栈,并处理页面之间切换、跳转和返回操作。...参数传递方法: Flutter多种方法可以实现路由参数传递,包括构造函数、构造器、Map等。不过,通常情况下我们使用Navigator.pushNamed方法来进行参数传递是比较方便。...Flutter,我们可以通过使用PageRoute和Opacity来实现透明路由,让页面之间切换更加流畅和自然。 1....路由保持状态 开发Flutter应用时,有时我们希望保持页面状态,避免页面重建,特别是页面间切换时。这种情况下,我们可以使用路由保持状态技术来实现。...我们创建了一个NestedNavigatorPage页面,并在其Widget树嵌套了两个Navigator小部件,分别使用不同GlobalKey来管理其导航状态

42810

Flutter开发一些Tips

最终我解决方法就是使用Column配合Expanded来实现。修复后如下: 3.SafeArea ---- 一旦部件固定在顶部或者底部(严谨点的话可以说是屏幕四边)。...Scaffold AppBar,AppBar默认titleAndroid靠左显示,IOS居中显示。如果需要两个平台效果统一,需要设置AppBar主动设置centerTitle属性。...Flutter并没有后者,所以可能一开始你是TextInputType.number,但是输入法中切换成中文键盘,一样可以输入中文字符。...使用场景是给一些无点击事件部件添加点击事件时使用(也支持长按、双击等事件),同时你也可以去修改它颜色和形状。...诸如此类信息没有打包进去(但是引用xmlflutter_image_picker_file_paths文件却在),导致我实际使用这些功能时没有反应,但是平时调试过程却是好

2.1K30

Android widget之CompoundButton

大家好,又见面了,我是你们朋友全栈君。 简介 具有两个状态按钮,已选中或未选中。当按下或点击按钮时,状态会自动更改。...使用 相比较Button而言多出了一个监听事件(接口) CompoundButton.OnCheckedChangeListener 当复合按钮检查状态发生变化时调用。...Switch 开关:是一个双状态切换开关小部件,可以两个选项之间进行选择。用户可以来回拖动“拇指”来选择所选择选项,或者只需轻按以切换,就像复选框一样。...该text 属性控制交换机标签显示文本,而 文本off和on文本控制拇指上文本。...轨迹” ToggleButton 显示 打开/关闭 状态按钮,默认情况下伴随文本“ON”或“OFF”。

2.2K20

【DIY数字仪表】使用TouchGFXMVP架构来实现GUI和硬件双向交互(2)

MVP与MVC有着一个重大区别:MVPView并不直接使用Model,它们之间通信是通过Presenter (MVCController)来进行,所有的交互都发生在Presenter内部。...TouchGFX自己内存分配方案,它仅分配给最大View和最大Presenter,分配RAM可以应用程序所有Screen上重用。...Model Model类是一个单例,始终处于活动状态,并具有两个目的: 存储UI状态信息。...切换Screen时,View和Presenter被释放,因此它们不能用于存储应在Screen切换期间保留信息。所有,需要Model来存储UI状态信息。...小结 MVP架构,所有数据只能保持在Model类对象,Presenter是View与Model之间纽带,View只能通过Presenter来读取数据,而不能直接读取Model数据。

1.8K20

flutter渲染详解

除此以外, ///给定元素将安排更新以切换到此小部件。 ///可以看出Element只会创建一次,后面会进行复用 /// /// [runApp]用于引导应用程序。...,注意代码添加注释: // child表示要更新Element,newWidget表示对应ElementWidget, // newSlot用来标识Element所在位置,返回该位置对应新Element.../// ///如果给定部件具有全局键并且已经存在一个元素有一个带有该全局键部件,此函数将重用该元素 ///(可能从树其他位置移植或重新激活从无效元素列表获取),而不是创建一个新元素。...Timeline.startSync('Warm-up frame'); final bool hadScheduledFrame = _hasScheduledFrame; // 我们在这里使用计时器来确保微任务两者之间刷新...其中Widget用来描述页面的属性,这个对象是十分轻量级且是不可变同一个Widget可以描述多个Element配置,Element同时持有了Widget和RenderObject,它汇总了所有的属性信息

1.2K20
领券