flutter常用布局笔记

2476次阅读 | 发布于3年以前

一些常用代码片段，可以直接用

常用代码

padding: EdgeInsets.only(left: 15, right: 15, top: 3, bottom: 3),
margin: const EdgeInsets.all(10.0),

direction: Axis.vertical,
physics:NeverScrollableScrollPhysics(),//listView禁用滑动事件
alignment: WrapAlignment.center,

MediaQuery.of(context).size.width

EdgeInsets.all(8.0)
EdgeInsets.fromLTRB(10.0, 0.0, 43.0, 0.0)
"images/group-${groupMap["groupType"].toLowerCase()}.png"

所有布局widget都有一个child属性（例如Center或Container），或者一个 children属性，如果他们需要一个widget列表（例如Row，Column，Wrap， ListView或Stack）。

Row 和 Column 是 Flex 组件，是无法滚动的，如果没有足够的空间，flutter就提示溢出错误。

Wrap：Wrap可以进行水平方向或者垂直方向上的布局,在一行或者一列显示不完所有的widgets的时候，能够根据当前宽度或者高度自动换行。

流式布局-Wrap、Flow&&层叠布局-Stack

Positioned：这个widget是配合Stack使用的，他的参数全是设置方向或者宽高的

Flexible组件可以使Row、Column、Flex等子组件在主轴方向有填充可用空间的能力(例如，Row在水平方向，Column在垂直方向)，但是它与Expanded组件不同，它不强制子组件填充可用空间。

Expanded组件是flutter中使用率很高的一个组件，它可以动态调整child组件沿主轴的尺寸，比如填充剩余空间，比如设置尺寸比例。它常常和Row或Column组合起来使用。Expanded组件必须用在Row、Column、Flex内

Container里放Container需要设置alignment: Alignment.center,属性

基础 Widget

Flutter有一套丰富、强大的基础widget，其中以下是很常用的：

Text：该 widget 可让创建一个带格式的文本。
Row、 Column：这些具有弹性空间的布局类Widget可让您在水平（Row）和垂直（Column）方向上创建灵活的布局。其设计是基于web开发中的Flexbox布局模型。
Stack：取代线性布局 (译者语：和Android中的LinearLayout相似)，Stack允许子 widget 堆叠，你可以使用 Positioned 来定位他们相对于Stack的上下左右四条边的位置。Stacks是基于Web开发中的绝对定位（absolute positioning )布局模型设计的。
Container：Container 可让您创建矩形视觉元素。container 可以装饰为一个BoxDecoration, 如 background、一个边框、或者一个阴影。Container 也可以具有边距（margins）、填充(padding)和应用于其大小的约束(constraints)。另外， Container可以使用矩阵在三维空间中对其进行变换。

async {
            //解绑//TODO
          Map<String, String> paramsMap = new Map<String, String>();

    bool result= await service.unBind(context,params:paramsMap);}

await必须在async里面

字符串里预置替换变量用法

String content = sprintf(Language.get("alertSureUnbindRole"), [roleListMap["name"]]);

"alertSureUnbindRole": "确定解绑%s身份吗?",

延迟执行方法

Future.delayed(Duration(milliseconds: 150), () =>Redirect.reLaunch(ContextStore.get()));