关于Flutter页面布局

不定期更新，把重要涉及到的属性都写上了，其余需要自己填写，有错误或者改进欢迎指正

1、AppBar

效果

        appBar: PreferredSize(
          child: AppBar(
            titleSpacing: -15, //title和leading的距离，越小越近
            leading: Builder(//左上角的控件，一般放一个icon
              builder: (BuildContext context) {
                return IconButton(
                  icon: ,
                  onPressed: () {},//button点击事件
                );
              },
            ),
            elevation: 0, //去掉appbar底部shadow
          ),
          preferredSize: Size.fromHeight(38), //appbar高度
        ),

2、子元素溢出父元素，常用来将子元素按父元素bottom border切分开，这个写法到后面会有些问题，用别的方式替换了

效果

 

Container(
      height: 100,
      child: OverflowBox(
        maxHeight: 400,//要大于父元素高度才能溢出
        child: Container(
          height: 200,
        ),
      ),
    );

 3、Container嵌套Container，父元素需要设置alignment子元素才正常显示高度

Container(
          alignment: Alignment.topCenter,//设置alignment后子元素高度才正常显示
          height: 200,
          ),
          child: Container(
            height: 140,
          ),
        ),

4、borderColor透明度不起作用，borderRadius只能设置在border统一的样式上，不能和只设置bottom的border样式放一起，比如设置了圆角又设置bottom border

                  decoration: BoxDecoration(
                    color: Color(0xffffffff),
                    // borderRadius只能设置在border统一的样式上，不能和只设置bottom的border样式放一起
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(10.0),
                        topRight: Radius.circular(10.0)),
                    border: Border(
                      bottom: BorderSide(
                        //这里单独设置了透明度但是不起作用，又加了withOpacity
                        color: Color(0xcc000000).withOpacity(0.2),
                        width: 1.0,
                        style: BorderStyle.solid
                      )
                    )
                  ),

 5、CachedNetworkImage的placeholder放CircularProgressIndicator时，progress放到center里才变小，但是设置宽高度不起作用

                   CachedNetworkImage(
                      fit: BoxFit.cover,
                      imageUrl: url,
                      placeholder: (context, url) =>
                      //改变process宽高度必须这样的widget结构
                      Center(
                          child: SizedBox(
                            width: 20.0,
                            height: 20.0,
                            child: CircularProgressIndicator(
                              //修改progress颜色
                              valueColor: AlwaysStoppedAnimation(Color(0xff333333)),
                            ),
                          )),
                      errorWidget: (context, url, error) => Image.asset(
                        'default_photo.png',
                        width: 40.0,
                        height: 40.0,
                      ),
                    ),

 6、全屏滚动ListView包裹GridView的时候报Vertical viewport was given unbounded height.

如果单给GridView套Expand的话会报Expand的错，直接加shrinkWrap: true,属性就可以了

7、InkWell必须放在Material Widget里，这块拆分showDialog的时候出现的，可以用GestureDetector代替

8、android appbar和content中间有一条线，ios没有，找了好久。。PreferredSize指定appbar高度导致的，也可能是flutter_screenutil导致的1个像素的问题。改个数字就行了