Flutter - UI控件

1， Button上文字居左显示

child: RaisedButton(
    padding: EdgeInsets.zero, //这里不能少
    onPressed: () {
      print("click");
    },
    child: Container(
        padding: EdgeInsets.only(left: 10), //只设置padding是不生效的
        child: Text("Button", style: TextStyle(fontSize: 12))))

上面的代码中试图设置Button中Container的padding，来让Text居左显示是不生效的。原因是Button上的child控件默认是居中对齐的。

child: RaisedButton(
    padding: EdgeInsets.zero, //这里不能少
    onPressed: () {
      print("click");
    },
    child: Container(
        alignment: Alignment.centerLeft, //加上这句代码就可以了
        padding: EdgeInsets.only(left: 10), //只设置padding是不生效的
        child: Text("Button", style: TextStyle(fontSize: 12))))

这里还有一个疑问，Contrainer中的alignment是设置Contrainer中child相对于Contrainer布局的。这里设置后，整个Container就撑开了，铺满了Button。这可能跟Button内部的实现有关。 记住：Contrainer中的alignment是设置Contrainer中child相对于Contrainer布局的。而不是Contrainer相对于它的父视图布局的方式。

2，获取手机顶部状态栏的高度

MediaQuery.of(context).padding.top

所以在页面布局的时候，可以将满铺屏幕的Container的PaddingTop设置成MediaQuery.of(context).padding.top 这样就可以让Container的子视图从状态栏下开始布局，不至于让状态栏遮住了子视图。同样，也可以使用SafeArea包裹整个视图。

3, Container加点击动作
Container设置了宽度100，如果不设置背景色，点击手势只在Container中真实内容宽度上生效。设置背景色transparent(透明)后，宽度100的范围上都会生效。

 GestureDetector(
    onTap: () {
        println("点击了导航");
    },
   child: Container(
        color: Colors.transparent,
        width: 100,
        height: 20,
        child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[]
            )
    )

4, Vertical viewport was given unbounded height error

  return Container(
      width: 280,
      height: 320,
      color: Colors.orange,
      padding: const EdgeInsets.all(20),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            margin: const EdgeInsets.only(bottom: 15),
            child: Text("即插即充支持车型"),
          ),
          Expanded(
            flex: 1,
            child: ListView.builder(
              itemBuilder: (BuildContext context, int index) {
                return _renderListViewItem(index);
              },
              itemCount: 10,
            ),
          )
        ],
      ));

上面是一个Colum结构，上方是一个固定的Container()，下面是一个ListView，ListView必须用Expand()包裹，否则会报错：Vertical viewport was given unbounded height error

5, 在一个固定高度的Container()中嵌套一个ListView.builder()，ListView上方有一段奇怪的空白。 解决方法：给ListView添加一个Padding.

ListView.separated(
         padding:
         EdgeInsets.all(0),
         shrinkWrap: true,
         controller: scrollController,
         physics: BouncingScrollPhysics(),
         ...
         ...
         ...
         )