Flutter布局坑 --持續(xù)更新

1、flutter中如何對Row或Column中的子widget進(jìn)行一左一右(一上一下)布局?

Align來實現(xiàn)
方法一:使用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"),
      )
    ],
  ),
)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容