介尘部落

文学|音乐|休闲娱乐|计算机技术|地球科学|社会学——知识成就命运


flutter实现行Row的两个子控件分别左对齐和右对齐

实现行中两个控件分别左对齐和右对齐,方式有很多,示例代码如下:

方式一:使用spaceBetween对齐方式

new Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    new Text("left"),
    new Text("right")
  ]
);

方式二:中间使用Expanded自动扩展

Row(
  children: <Widget>[
    FlutterLogo(),//左对齐
    Expanded(child: SizedBox()),//自动扩展挤压
    FlutterLogo(),//右对齐
  ],
);

方式三:使用Spacer自动填充

Row(
  children: <Widget>[
    FlutterLogo(),
    Spacer(),
    FlutterLogo(),
  ],
);

方式四:使用Flexible

Row(
  children: <Widget>[
    FlutterLogo(),
    Flexible(fit: FlexFit.tight, child: SizedBox()),
    FlutterLogo(),
  ],
);

实现效果如下:

image.png
阅读全文
公众号-介尘阅读时光
赞赏支持

0 Responses to “flutter实现行Row的两个子控件分别左对齐和右对齐”

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)