当前位置：首页 > news >正文

flutter 专题九十六 Flutter开发之常用Widgets

news 来源：原创 2025/9/7 8:57:29

上一篇，我们介绍了基础Widgets，接下来，我们看一下Flutter开发中一些比较常见的Widget。

Flutter Widget采用现代响应式框架构建，这是从 React 中获得的灵感，中心思想是用widget构建你的UI。 Widget描述了他们的视图在给定其当前配置和状态时应该看起来像什么。当widget的状态发生变化时，widget会重新构建UI，Flutter会对比前后变化的不同，以确定底层渲染树从一个状态转换到下一个状态所需的最小更改，类似于React/Vue中虚拟DOM的diff算法。

状态管理

响应式的编程框架中都会有一个永恒的主题——“状态(State)管理”，无论是在React/Vue（两者都是支持响应式编程的Web开发框架）还是Flutter中，他们讨论的问题和解决的思想都是一致的。谈到管理状态，就不得不说以下几个常见的方法：

Widget管理自己的状态。
Widget管理子Widget状态。
混合管理（父Widget和子Widget都管理状态）。

那么，如何选择哪种状态管理方式呢？下面是官方给出的一些原则可以帮助你做出决定。

如果状态是用户数据，如复选框的选中状态、滑块的位置，则该状态最好由父Widget管理。
如果状态是有关界面外观效果的，例如颜色、动画，那么状态最好由Widget本身来管理。
如果某一个状态是不同Widget共享的则最好由它们共同的父Widget管理。

接下来，我们将通过创建三个简单示例TapboxA、TapboxB和TapboxC来说明管理状态的不同方式。
这些例子功能是相似的 ——创建一个盒子，当点击它时，盒子背景会在绿色与灰色之间切换。状态 _active确定颜色：绿色为true ，灰色为false，如下图所示。

管理自身状态

例如，有一个_TapboxAState类，该类主要实现了以下一些功能：

管理TapboxA的状态。
定义_active：确定盒子的当前颜色的布尔值。
定义_handleTap()函数，该函数在点击该盒子时更新_active，并调用setState()更新UI。
实现widget的所有交互式行为。

class TapboxA extends StatefulWidget {TapboxA({Key key}) : super(key: key);@override_TapboxAState createState() => new _TapboxAState();
}class _TapboxAState extends State<TapboxA> {bool _active = false;void _handleTap() {setState(() {_active = !_active;});}Widget build(BuildContext context) {return new GestureDetector(onTap: _handleTap,child: new Container(child: new Center(child: new Text(_active ? 'Active' : 'Inactive',style: new TextStyle(fontSize: 32.0, color: Colors.white),),),width: 200.0,height: 200.0,decoration: new BoxDecoration(color: _active ? Colors.lightGreen[700] : Colors.grey[600],),),);}
}

状态管理

管理自身状态

布局Widget

相关文章：