2. Flutter组件

• 布局组件:

Container

常用的属性：

• child【子节点】
• padding【内容距离盒子边界的距离】
  举例：padding: EdgeInsets.all(10)
• margin 【盒子边界之外的距离】
• 举例：margin: EdgeInsets.all(10)
• decoration【盒子的装饰】
  举例：

decoration: BoxDecoration(
    color: Colors.red,
    border: Border(bottom: BorderSide(width: 5, color: Colors.cyan)))

Row

使内部的 children 子元素横向布局
属性：

• children【子元素】
• mainAxisAlignment【横向对其方式】
• crossAxisAlignment【纵向对其方式】

Column

使内部的 children 子元素纵向布局
属性：

• children【子元素】
• mainAxisAlignment【纵向对其方式】
• crossAxisAlignment【横向对其方式】

Expanded

主要用来控制 flex 布局的占位宽度。
需要用在 Row 或 Column 子组件内部。
举例：

Row(
  children: <Widget>[
    Expanded(child: Text('主体内容1'), flex: 2,),
    Expanded(child: Text('主体内容2'), flex: 1,)
  ]
)

padding

Scaffold

该组件是页面结构的脚手架，包含了页面的基本组成单元，例如：

• appBar【头部导航条区域】
• body【页面主题内容区域】
• drawer【侧边栏抽屉区域】
• bottomNavigationBar【底部tabBar区域】
• floatingActionButton【右下角浮动按钮区域】
  实例：

Scaffold(
    appBar: AppBar(
      title: Text('页面标题'),
    ),
    body: Center(
      child: Text('主体内容'),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {},
      child: Icon(Icons.add),
    ),
    drawer: Drawer(),
  ),
  // 主题颜色
  theme: ThemeData(primarySwatch: Colors.red),
)

---

ListView

循环渲染列表数据

如果要把列表数据，通过循环渲染之后，得到 UI 结构类似的列表页面，推荐使用 ListView.builder()，基础用法如下：

ListView.builder(
  // 必须指定列表项的长度
  itemCount: 列表项的长度,
  // Item 项的构建器
  itemBuilder: (BuildContext ctx, int i) {
    return Text('aaa');
  }
)

保持列表项的数据状态

如果存在多个列表页之间的动态切换，默认无法保持每个列表项的滚动距离、数据状态等信息，此时需要实现 AutomaticKeepAliveClientMixin 特征，来保持列表项的滚动状态，示例代码如下：

class _MovieListState extends State<MovieList>
    with AutomaticKeepAliveClientMixin {
      // 重写 wantKeepAlive 函数
      @override
      bool get wantKeepAlive => true;
    }

---

CircleAvatar

提供圆形的用户头像区域，使用起来比较简单，示例代码如下：

CircleAvatar(
  backgroundImage: NetworkImage(
      'https://images.gitee.com/uploads/91/465191_vsdeveloper.png'),
)

---

Center

可将内部的子元素，呈现到屏幕正中央进行显示，代码示例如下：

Center(
  child: 子元素,
)

---

GridView

1. GridView.count 实现布局
2. GridView.builder 实现布局