Flutter Widget框架及演示

最新推荐文章于 2022-05-17 14:07:31 发布

jike_yangyujing

最新推荐文章于 2022-05-17 14:07:31 发布

阅读量283

点赞数

分类专栏： Flutter 文章标签： flutter widget widget demo statelessWidget statefulWidget flutter state

本文链接：https://blog.csdn.net/jike_yangyujing/article/details/103089651

版权

本文深入探讨Flutter的Widget框架，从基础Widget到Material组件，再到处理手势和根据用户输入改变Widget。重点讨论了StatelessWidget和StatefulWidget的差异及生命周期，并通过购物车demo展示实践应用。

摘要由CSDN通过智能技术生成

1.介绍

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

Flutter应用本身就是一个widget，大部分widget都有一个build()方法。在应用程序的build方法中创建会在设备上显示的widget。

2.基础 Widget

Flutter有一套丰富、强大的基础widget，其中以下是很常用的：

Text：该 widget 可让创建一个带格式的文本。
Row、 Column：这些具有弹性空间的布局类Widget可让您在水平（Row）和垂直（Column）方向上创建灵活的布局。其设计是基于web开发中的Flexbox布局模型。
Stack：取代线性布局 (译者语：和Android中的LinearLayout相似)，Stack允许子 widget 堆叠，你可以使用 Positioned 来定位他们相对于Stack的上下左右四条边的位置。Stacks是基于Web开发中的绝度定位（absolute positioning )布局模型设计的。
Container： Container 可让您创建矩形视觉元素。container 可以装饰为一个BoxDecoration, 如 background、一个边框、或者一个阴影。 Container 也可以具有边距（margins）、填充(padding)和应用于其大小的约束(constraints)。另外， Container可以使用矩阵在三维空间中对其进行变换。

以下是一些简单的Widget，它们可以组合出其它的Widget：

// TODO 自定义appbar及material页面
// 在MyAppBar中创建一个Container，高度为56像素（像素单位独立于设备，为逻辑像素），其左侧和右侧均有8像素的填充。
// 在容器内部， MyAppBar使用Row 布局来排列其子项。
// 中间的title widget被标记为Expanded, ，这意味着它会填充尚未被其他子项占用的的剩余可用空间。
// Expanded可以拥有多个children， 然后使用flex参数来确定他们占用剩余空间的比例。
class MyAppBar extends StatelessWidget {
   
  MyAppBar({
   this.title});

  // Widget子类中的字段往往都会定义为"final"
  final Widget title;

  @override
  Widget build(BuildContext context) {
   
    return Container(
      height: 56,
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      decoration: BoxDecoration(color: Colors.blue),
      //row 水平方向的线性布局（linear layout）
      child: Row(
        //列表项的类型是 <Widget>
        children: <Widget>[
          IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'navigatorMenu',
            onPressed: null, //null 会禁用button
          ),
          // Expanded expands its child to fill the available space.
          Expanded(
            child: title,
          ),
          IconButton(
            icon: Icon(Icons.search),
            tooltip: "search",
            onPressed: null,
          )
        ],
      ),
    );
  }
}

// MyScaffold 通过一个Column widget，在垂直方向排列其子项。
// 在Column的顶部，放置了一个MyAppBar实例，将一个Text widget作为其标题传递给应用程序栏。
// 将widget作为参数传递给其他widget是一种强大的技术，可以让您创建各种复杂的widget。
// 最后，MyScaffold使用了一个Expanded来填充剩余的空间，正中间包含一条message。
class MyScaffold extends StatelessWidget {
   
  @override
  Widget build(BuildContext context) {
   
     Material 是UI呈现的“一张纸”
    return Material(
      //Column is 垂直方向的线性布局
      child: Column(
        children: <Widget>[
           MyAppBar(
            title: Text(
              'example title',
              style: Theme.of(context).primaryTextTheme.title,
            ),
          ),
          Expanded(
            child: Center(
              child: Text('hello world'),
            ),
          )
        ],
      ),
    );
  }
}

class MyApp extends StatelessWidget {
   
  @override
  Widget build(BuildContext context) {
   
    //为了继承主题数据，widget需要位于MaterialApp内才能正常显示， 因此我们使用MaterialApp来运行该应用
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
     home: MyScaffold()