首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter--常用的布局控件

Flutter--常用的布局控件

作者头像
None_Ling
发布2019-03-15 10:12:07
1.7K0
发布2019-03-15 10:12:07
举报
文章被收录于专栏:Android相关Android相关

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中构建布局

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.03.05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Flutter的控件
  • 如何布局
  • 布局的主方向
  • Column+Row实现复杂布局
  • 调整Widget的大小
  • 控件层叠Stack
  • 参考资料
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档