Flutter布局坑 --持续更新

1、flutter中如何对Row或Column中的子widget进行一左一右(一上一下)布局?

Align来实现
方法一:使用Flexible
在两个child中间加一个收缩物,把他们分开。

Row( 
                children: <Widget>[
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Text("韩信无敌",
                            maxLines: 1,
                            style: TextStyle(
                                fontSize: platform.iPadFont(14),
                                color: Color(0xff333333)),
                            textAlign: TextAlign.left,
                            overflow: TextOverflow.ellipsis),
                  ),
                  Flexible(child: SizedBox(), fit: FlexFit.tight),
                  Align(
                    alignment: Alignment.centerRight,
                    child: Image.asset('assets/lock_yellow.png'),
                  ),

方法二:使用spaceBetween
利用flutter中布局最重要的概念:轴

Row( 
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Text("韩信无敌",
                            maxLines: 1,
                            style: TextStyle(
                                fontSize: platform.iPadFont(14),
                                color: Color(0xff333333)),
                            textAlign: TextAlign.left,
                            overflow: TextOverflow.ellipsis),
                  ),
                  Align(
                    alignment: Alignment.centerRight,
                    child: Image.asset('assets/lock_yellow.png'),
                  ),
2、ListView嵌套Column、ListView嵌套Row

会显示不出来。
需要在外面包一层Container,Column需要指定height,Row需要指定width

如:

Container(
  height: 44.0,
  child: ListView(
    scrollDirection: Axis.horizontal,
    children: <Widget>[
      RaisedButton(
        onPressed: null,
        child: Text("Facebook"),
      ),
      Padding(padding: EdgeInsets.all(5.00)),
      RaisedButton(
        onPressed: null,
        child: Text("Google"),
      )
    ],
  ),
)
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容