flutter常用布局笔记

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

常用代码

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 可让创建一个带格式的文本。
  • RowColumn:这些具有弹性空间的布局类Widget可让您在水平(Row)和垂直(Column)方向上创建灵活的布局。其设计是基于web开发中的Flexbox布局模型。
  • Stack:取代线性布局 (译者语:和Android中的LinearLayout相似),Stack允许子 widget 堆叠, 你可以使用 Positioned 来定位他们相对于Stack的上下左右四条边的位置。Stacks是基于Web开发中的绝对定位(absolute positioning )布局模型设计的。
  • ContainerContainer 可让您创建矩形视觉元素。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()));

手机扫码阅读