【Flutter】常用布局容器二

Row and Column

Row 水平布局
Column 垂直布局
基本属性：

• mainAxisAlignment 主轴对齐方式
  可取值：
  MainAxisAlignment.start, MainAxisAlignment.end, MainAxisAlignment.center, 字面意思
  MainAxisAlignment.spaceBetween, 第一个子控件距离开始位置和最后一个距离结尾距离为 0
  MainAxisAlignment.spaceAround, 第一个子控件距离开始位置和最后一个距离结尾的位置是其他控件的一半。
  MainAxisAlignment.spaceEvenly 所有间距相等

• crossAxisAlignment 次轴对齐方式
  可取值：
  CrossAxisAlignment.start, CrossAxisAlignment.end, CrossAxisAlignment.center, CrossAxisAlignment.stretch,
  CrossAxisAlignment.baseline

image
image

• textDirection 书写方向 ，取值 [TextDirection.rtl, TextDirection.ltr]
• verticalDirection 对齐，取值 [VerticalDirection.up, VerticalDirection.down]

GridView

return GridView.count(
  scrollDirection: Axis.vertical,
  crossAxisCount: 3,
  mainAxisSpacing: 5,
  crossAxisSpacing: 5,
  childAspectRatio: 1,
  children: <Widget>[
  ],
);

通过这个组件可以很方便写九宫格布局等，但是这么设置子组件的宽高设置会不生效。

image

属性

• scrollDirection 滚动方向 默认是垂直 一般也是垂直。
• crossAxisCount 次轴方向子节点数
• mainAxisSpacing 主轴方向间隔
• crossAxisSpacing 纵轴方向间隔
• childAspectRatio 子控件的宽高比

ListView

常规写法

return ListView(
  reverse: false,
  padding: const EdgeInsets.all(30.0),
  scrollDirection: Axis.vertical,
  children: <Widget>[
    Container(
      width: 100,
      height: 100,
      child: Text('text-1'),
    ),
  ],
);

这种写法会一次性加载列表 ，没有懒加载，可以使用 ListView.builder 只渲染显示部分。

return ListView.builder(
  itemExtent: 80, // 预置高度，如果不设置依赖子控件的高
  itemCount: 10, // 如果小于 itemBuilder  出来的 items 数量，则不展示多余部分。
  itemBuilder: (context, index) {
    return Container(
      alignment: Alignment.center,
      color: index % 2 == 0 ? Colors.red : Colors.blue,
      child: Text(index.toString()),
    );
  }
);

Expanded

return new Expanded(); // 会报错，必须作用在 Row, Column，flex 中。

return Row(
  children: <Widget>[
    Text('text-1'),
    new Expanded(child: Text('expaned')),
    Text('text-2')
  ],
);

效果如下：

image

撑开剩余的空间。

ExpansionTile 手风琴

return ExpansionTile(
  leading: CircleAvatar(
    backgroundColor: Colors.blue,
    radius: 20,
  ),
  title: Text('select'),
  children: <Widget>[
    GestureDetector(
      onTap: _controller,
      child: Container(
        height: 44,
        child: Text('click'),
      ),
    ),
  ],
);