Flutter--常用的布局控件

Flutter的控件

Flutter提供的控件非常多，都可以在Flutter Widget 索引中进行查看。

对于Flutter而言，所有可见的都是Widget。即使一个全新的页面，也是一个Widget。没有Android中的Activity，它和IOS有些类似，对于IOS而言，所有的东西都是ViewController。

Flutter中布局的构建，基本都是通过Row、Column来实现的。思想也就类似于H5中的Div。

• Row/Column：实现页面中的一块控件
• Container：控制控件的内外边距
• Expanded：实现类似于Flex的功能，用来分配控件空间

如何布局

• 找出行和列.
• 布局包含网格吗?
• 有重叠的元素吗?
• 是否需要选项卡?
• 注意需要对齐、填充和边框的区域.

Flutter很大的问题就在于一旦页面比较复杂，小控件较多的话，嵌套层级会非常深，所以Flutter官方推荐将子控件通过函数返回，或者创建一个Widget类来实现该模块

布局的主方向

对于Row而言，Horizontal为主轴，而Vertical为横轴
对于Column而言，Vertical为主轴，而Horizontal为横轴

不同布局的主轴

Column+Row实现复杂布局

通过Raw+Column可以实现卡片里通用的上下、左右的布局。

Column+Raw的混合使用

其中：

• 通过Container的padding属性来设置EdgeInsets外边距，如果需要实现内边距，则可以使用margin属性
  Container
• 当需要圆角的时候，可以在Container的decoration中设置BoxDecoration来添加，在BoxDecoration.borderRadius属性中设置圆角
• 通过Expanded来实现H5中Flex的布局，或者说Android中的Weight来分配Widget剩余的空间
• 通过crossAxisAlignment来设置Android中的Gravity也就是内容的位置

控件实现：

class TitleWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(32.0), // 设置边距，上下左右全为32
      child: new Row( 
        children: [
          new Expanded( //上下文本的Widget
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.start, // 从Widget的开始处绘制内容
              children: [
                new Container(
                  padding: const EdgeInsets.only(bottom: 8.0), // 控制文本的外边距为底部8像素
                  child: new Text(
                    'Oeschinen Lake Campground',
                    style: new TextStyle(
                      fontWeight: FontWeight.bold,  // 设置字体为粗体
                    ),
                  ),
                ),
                new Text(
                  'Kandersteg, Switzerland',
                  style: new TextStyle(
                    color: Colors.grey[500],   // 设置字体颜色为灰色
                  ),
                ),
              ],
            ),
          ),
          new Icon(
            Icons.star,   // 设置icon
            color: Colors.red[500],  // 设置图标颜色为红色
          ),
          new Text('41'),
        ],
      ),
    );
  }
}

如果在Raw中设置mainAxisAlignment: MainAxisAlignment.spaceEvenly，则代表将控件空间平均分给子控件，但是如果子控件中有Expanded，那会以Expanded子控件为主，mainAxisAlignment则不会生效

调整Widget的大小

如果有如下图所示的情况，中间的控件或者其他控件需要占据不同的比例分配空间，则可以使用flex属性，来进行空间分配。

不均等分配空间
默认每个子widget的flex都是1，当有不为1的情况出现，则会根据flex之和，再按比例分配子控件空间。

body: new Center(
  child: new Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      new Expanded(
        child: new Image.asset('images/pic1.jpg'),
      ),
      new Expanded(
        flex: 2,
        child: new Image.asset('images/pic2.jpg'),
      ),
      new Expanded(
        child: new Image.asset('images/pic3.jpg'),
      ),
  )
)

控件层叠Stack

在Android中可以使用FrameLayout来层叠控件，而在Flutter中，则是通过Stack来实现。

Stack

相关实现：

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    var stack = new Stack( // 创建Stack Widget
      alignment: const Alignment(0.6, 0.6),  
      children: [
        new CircleAvatar(   // 圆形头像的控件
          backgroundImage: new AssetImage('images/pic.jpg'), // 图片
          radius: 100.0, // 图片的圆角
        ),
        new Container(
          decoration: new BoxDecoration(
            color: Colors.black45, //  Container的背景色
          ),
          child: new Text(
            'Mia B',
            style: new TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),
        ),
      ],
    );
    // ...
  }
}

参考资料

在Flutter中构建布局