🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
[TOC] ## 布局 ### Container 类似于div , 可以添加padding、margin、border、background color、 boxShadow、**通常用于装饰其他Widget** ``` key Container唯一标识符,用于查找更新。 alignment 控制child的对齐方式,如果container或者container父节点尺寸大于child的尺寸,这个属性设置会起作用,有很多种对齐方式。 padding decoration内部的空白区域,如果有child的话,child位于padding内部。padding与margin的不同之处在于,padding是包含在content内,而margin则是外部边界,设置点击事件的话,padding区域会响应,而margin区域不会响应。 color 用来设置container背景色,如果foregroundDecoration设置的话,可能会遮盖color效果。 decoration 绘制在child后面的装饰,设置了decoration的话,就不能设置color属性,否则会报错,此时应该在decoration中进行颜色的设置。 foregroundDecoration 绘制在child前面的装饰。 width container的宽度,设置为double.infinity可以强制在宽度上撑满,不设置,则根据child和父节点两者一起布局。 height container的高度,设置为double.infinity可以强制在高度上撑满。 constraints 添加到child上额外的约束条件。 margin 围绕在decoration和child之外的空白区域,不属于内容区域。 transform 设置container的变换矩阵,类型为Matrix4。 child container中的内容widget。 ``` ``` child: new Container( padding: const EdgeInsets.all(10.0), width: 10.0, height: 10.0, /*装饰*/ decoration: new BoxDecoration( border:Border.all(width:12.0,color:Colors.red), //border width:边宽 color:颜色 borderRadius: BorderRadius.all(const Radius.circular(10.0)), // border圆角 boxShadow: <BoxShadow>[ // 阴影 new BoxShadow( color: Color(0X2A3B2C), offset: Offset(0, 30), blurRadius: 80, ), ] ), child: new Column( ), ``` ![UTOOLS1579165589851.png](http://yanxuan.nosdn.127.net/70c8dfdc777233c7a7ff446091b39e86.png) ### Row、Column 其实就是flex布局中的flex-direction 一般 配合 `Container > Column > Row` ``` class Home extends StatelessWidget { @override Widget build(BuildContext context) { return Material( child: new Container( child: new Column( children: <Widget>[ new Row( children: <Widget>[ new Text("hello"), new Text("word"), ], ), new Row( children: <Widget>[ new Text("hello1"), new Text("word2"), ], ) ], ), ), ); } } ``` ## Flex Flutter 中的弹性布局主要通过`Flex`和`Expanded`来配合实现 `Flex`组件可以沿着水平或垂直方向排列子组件,如果你知道主轴方向,使用`Row`或`Column`会方便一些,**因为`Row`和`Column`都继承自`Flex`** ``` bool isHandset = MediaQuery.of(context).size.width < 600; return Flex( children: [Text("Foo"), Text("Bar"), Text("Baz")], direction: isHandset ? Axis.vertical : Axis.horizontal); ``` ### GridView web中display:grid ``` new GridView.count( primary: false, padding: const EdgeInsets.all(20.0), crossAxisSpacing: 10.0, crossAxisCount: 3, children: <Widget>[ const Text('He\'d have you all unravel at the'), const Text('Heed not the rabble'), const Text('Sound of screams but the'), const Text('Who scream'), const Text('Revolution is coming...'), const Text('Revolution, they...'), ], ) ``` ### ListView ``` child: CustomScrollView( shrinkWrap: true, slivers: <Widget>[ SliverPadding( padding: const EdgeInsets.all(20.0), sliver: SliverList( delegate: SliverChildListDelegate( <Widget>[ const Text('I\'m dedicating every day to you'), const Text('Domestic life was never quite my style'), const Text('When you smile, you knock me out, I fall apart'), const Text('And I thought I was so smart'), ], ), ), ), ], ) ``` ### Card 卡片效果 ``` return Center( child: Card( child: InkWell( splashColor: Colors.red.withAlpha(30),//鼠标按压时候的颜色 onTap: () { print('Card tapped.'); // 点击操作 }, onDoubleTap: () { print('Card tapped2.'); // 点击操作 }, child: Container( width: 300, height: 100, child: Text('A card that can be tapped1'), ), ), ), ); ``` ![UTOOLS1579167233283.png](http://yanxuan.nosdn.127.net/07db777b842fbae63994895b45227c08.png) ### Expanded 它会填充尚未被其他子项占用的的剩余可用空间。Expanded可以拥有多个children。然后使用flex参数来确定他们占用剩余空间的比例。更多细节可以参看:flutter控件Flexible和 Expanded的区别 ### FittedBox 缩放和位置调整 ``` new Container( padding: const EdgeInsets.only(top: 60.0), color: Colors.amberAccent, width: 300.0, height: 300.0, child: new FittedBox( fit: BoxFit.contain, // child 缩放 alignment: Alignment.bottomLeft, // child 位置 child: new Container( color: Colors.red, child: new Text("FittedBox"), ), ), ); ```