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的混合使用

其中:

  • 通过Containerpadding属性来设置EdgeInsets外边距,如果需要实现内边距,则可以使用margin属性

Container

  • 当需要圆角的时候,可以在Containerdecoration中设置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中构建布局

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券