瞎扯

flutter雖然已經(jīng)發(fā)布了正式版,但不得不說,有些地方還是不完善.

比如:

導(dǎo)包不方便.

應(yīng)該說android studio的插件還沒做好.目前我還沒看到自動導(dǎo)包

沒有智能補全提示.

和上面一樣,還是插件的問題

寫到一半套容器麻煩

布局改起來.特別是需要給控件套容器.
很容易搞不清括號.

說正題.
先來段代碼

class _GoodsPageState extends State<GoodsPage> {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text("123"),
          ],
        )
      ],
    );
  }
}

image.png

咦.上篇不是寫了crossAxisAlignment這個是設(shè)置交叉方向設(shè)置嗎.
相當(dāng)于水平居中嗎
為什么沒有居中.

沒有居中.肯定是這個控件的大小問題了.

那么.怎么看每個控件的大小?

如果和寫android一樣,打開開發(fā)者模式里的布局邊界,你會發(fā)現(xiàn).
是這樣的

image.png

哈哈,完全沒卵用.

正確姿勢:

image.png

如圖,標(biāo)出來的3個地方.

然后你就會發(fā)現(xiàn),你可以點模擬器上的內(nèi)容了

image.png

界面上,還多了一個按鈕.

image.png

也就是,你選了一個以后,要切換,需要點一下這個按鈕.才能去選新的.

當(dāng)然,你也可以直接在as里面選

image.png

這里選了以后,模擬器上就會選中.

這時.就可以看到.

image.png

寫的Column只有這么點大小.

把mainAxisSize: MainAxisSize.min改成mainAxisSize: MainAxisSize.max,

image.png

會發(fā)現(xiàn),這個屬性,只會影響列的高度.不會影響寬度.

怎么占滿寬度呢?

return Row(
      children: <Widget>[
        Expanded(
            child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Text("123"),
          ],
        ))
      ],
    );

在Column外面套一層.Expanded就占滿了.
也就是相當(dāng)于android里的layout_weight=1

好了,今天就這些了,今天小年,哈哈

交流群:493180098,這是個很少吹水,交流學(xué)習(xí)的群.
APP開發(fā)維護(hù)咨詢?nèi)?: 492685472 ,承接APP迭代.開發(fā)維護(hù).咨詢業(yè)務(wù),付費快速解決問題.