Flutter 滚动布局的几种常见效果处理

一、滚动布局嵌套Column布局

有这么一种效果，编写的Column列表布局或者其它控件布局，如果超过屏幕的话需要能够进行上下滚动，或者如果弹出输入框的时候屏幕不会出现控件超出屏幕的问题。在这里主要是使用SingleChildScrollView进行解决。

效果如下:

代码如下:

class ScrollColumn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            SizedBox(height: 20,),
            Text("第一行啊"),
            SizedBox(height: 20,),
            Container(
              height: 800,
              margin: const EdgeInsets.all(20),
              padding: const EdgeInsets.all(5),
              color: Colors.grey,
              child: TextField(
                maxLines: null, //不限制行数
                decoration: InputDecoration(
                  border: InputBorder.none,
                  hintText: "输入内容",
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

二、强制子控件充满屏幕

假如布局想实现一种布局背景色为灰色，但是如果控件没有充满屏幕时候，那么灰色只会包括子控件，这样来说效果就不是很好了，这里使用CustomScrollView和SliverFillRemaining进行解决。当然如果父布局直接是屏幕的话，这个会强制设置为屏幕大小。解决方式根据具体情况使用

效果如下:

代码如下：

class ScrollColumn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
        slivers:[
          SliverFillRemaining(
            child: Container(
              color: Colors.red,
              padding: const EdgeInsets.all(20),
              child: Column(
                children: [
                  SizedBox(height: 20,),
                  Text("第一行啊"),
                  SizedBox(height: 20,),
                  Container(
                    height: 200,
                    margin: const EdgeInsets.all(20),
                    padding: const EdgeInsets.all(5),
                    color: Colors.grey,
                    child: TextField(
                      maxLines: null, //不限制行数
                      decoration: InputDecoration(
                        border: InputBorder.none,
                        hintText: "输入内容",
                      ),
                    ),
                  ),
                ],
              ),
            ),
          )
        ]
    );
  }
}