日更(二十九)-Flutter-页面编写.调试

瞎扯

flutter虽然已经发布了正式版,但不得不说,有些地方还是不完善.

比如:

导包不方便.

应该说android studio的插件还没做好.目前我还没看到自动导包

没有智能补全提示.

和上面一样,还是插件的问题

写到一半套容器麻烦

布局改起来.特别是需要给控件套容器.
很容易搞不清括号.

说正题.
先来段代码

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这个是设置交叉方向设置吗.
相当于水平居中吗
为什么没有居中.

没有居中.肯定是这个控件的大小问题了.

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

如果和写android一样,打开开发者模式里的布局边界,你会发现.
是这样的

image.png

哈哈,完全没卵用.

正确姿势:

image.png

如图,标出来的3个地方.

然后你就会发现,你可以点模拟器上的内容了

image.png

界面上,还多了一个按钮.

image.png

也就是,你选了一个以后,要切换,需要点一下这个按钮.才能去选新的.

当然,你也可以直接在as里面选

image.png

这里选了以后,模拟器上就会选中.

这时.就可以看到.

image.png

写的Column只有这么点大小.

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

image.png

会发现,这个属性,只会影响列的高度.不会影响宽度.

怎么占满宽度呢?

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

在Column外面套一层.Expanded就占满了.
也就是相当于android里的layout_weight=1

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

交流群:493180098,这是个很少吹水,交流学习的群.
APP开发维护咨询群 : 492685472 ,承接APP迭代.开发维护.咨询业务,付费快速解决问题.

最后编辑于：2019.03.13 10:42:20