首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Flutter 布局

Flutter 中拥有需要将近30种内置的 布局Widget,其中常用有 Container、Padding、Center、Flex、Stack、Row、Column、ListView 等,下面简单讲解它们的特性和使用。

Container :最常用的默认控件,但是实际上它是由多个内置控件组成的模版,只能包含一个child,支持 padding,margin,color,宽高,decoration(一般配置边框和阴影)等配置,在 Flutter 中,不是所有的控件都有 宽高、padding、margin、color 等属性,所以才会有 Padding、Center 等 Widget 的存在。

new Container( ///四周10大小的maring margin: EdgeInsets.all(10.0), height: 120.0, width: 500.0, ///透明黑色遮罩 decoration: new BoxDecoration( ///弧度为4.0 borderRadius: BorderRadius.all(Radius.circular(4.0)), ///设置了decoration的color,就不能设置Container的color。 color: Colors.black, ///边框 border: new Border.all(color: Color(GSYColors.subTextColor), width: 0.3)), child:new Text("666666"));

Column、Row 绝对是必备布局, 横竖布局也是日常中最常见的场景。如下方所示,它们常用的有这些属性配置:主轴方向是 start 或 center 等;副轴方向方向是 start 或 center 等;mainAxisSize 是充满最大尺寸,或者只根据子 Widget 显示最小尺寸。

//主轴方向,Column的竖向、Row我的横向mainAxisAlignment: MainAxisAlignment.start, //默认是最大充满、还是根据child显示最小大小mainAxisSize: MainAxisSize.max,//副轴方向,Column的横向、Row我的竖向crossAxisAlignment :CrossAxisAlignment.center,

Expanded 在 Column 和 Row 中代表着平均充满的作用,当有两个存在的时候默认均分充满。同时页可以设置flex属性决定比例。

new Column( ///主轴居中,即是竖直向居中 mainAxisAlignment: MainAxisAlignment.center, ///大小按照最小显示 mainAxisSize : MainAxisSize.min, ///横向也居中 crossAxisAlignment : CrossAxisAlignment.center, children: <Widget>[ ///flex默认为1 new Expanded(child: new Text("1111"), flex: 2,), new Expanded(child: new Text("2222")), ], );

接下来我们来写一个复杂一些的控件,首先我们创建一个私有方法_getBottomItem,返回一个Expanded Widget,因为后面我们需要将这个方法返回的 Widget 在 Row 下平均充满。

如代码中注释,布局内主要是现实一个居中的Icon图标和文本,中间间隔5.0的 padding:

///返回一个居中带图标和文本的Item _getBottomItem(IconData icon, String text) { ///充满 Row 横向的布局 return new Expanded( flex: 1, ///居中显示 child: new Center( ///横向布局 child: new Row( ///主轴居中,即是横向居中 mainAxisAlignment: MainAxisAlignment.center, ///大小按照最大充满 mainAxisSize : MainAxisSize.max, ///竖向也居中 crossAxisAlignment : CrossAxisAlignment.center, children: <Widget>[ ///一个图标,大小16.0,灰色 new Icon( icon, size: 16.0, color: Colors.grey, ), ///间隔 new Padding(padding: new EdgeInsets.only(left:5.0)), ///显示文本 new Text( text, //设置字体样式:颜色灰色,字体大小14.0 style: new TextStyle(color: Colors.grey, fontSize: 14.0), //超过的省略为...显示 overflow: TextOverflow.ellipsis, //最长一行 maxLines: 1, ), ], ), ), ); }

  • 发表于:
  • 原文链接https://page.om.qq.com/page/OGCkKLxVS2_Ft0hv9on58Q3Q0
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券