Flutter如何实现Container高度自适应撑满屏幕并添加滚动功能

修改方案 #

核心改动点 #

• 删除底部历史容器的固定高度height: 430，改用Expanded组件包裹该容器，自动撑满屏幕剩余高度
• 容器内部嵌套Scrollbar+SingleChildScrollView组件，实现内容溢出时可滚动并显示滚动条

完整修改后代码 #

Widget build(BuildContext context) {
  return Scaffold(
    body: Container(
      decoration: BoxDecoration(
        color: Colors.white12
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          // 顶部固定布局区域
          SizedBox(height: 20.0),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              // 若你使用的是旧版Flutter可保留原FlatButton写法，新版已改用TextButton
              TextButton(
                style: TextButton.styleFrom(
                  foregroundColor: Colors.blueGrey,
                  padding: EdgeInsets.fromLTRB(30.0, 10.0, 30, 10.0),
                ),
                child: Text('yes',textScaleFactor: 2.5),
                onPressed: null,
              ),
              TextButton(
                style: TextButton.styleFrom(
                  foregroundColor: Colors.blueGrey,
                  padding: EdgeInsets.fromLTRB(30.0, 10.0, 30, 10.0),
                ),
                child: Text('no',textScaleFactor: 2.5),
                onPressed: null,
              )
            ],
          ),
          SizedBox(height: 15.0),
          Container(
            child: Text(('20000' == null ? '' : '10000'), style: TextStyle(fontSize: 45.0,color: Colors.blueGrey)),
            padding: EdgeInsets.fromLTRB(0, 0.0, 0, 20.0),
          ),
          Container(
            child: Text("weight", style: TextStyle(fontSize: 20.0,color: Colors.blueGrey)),
            padding: EdgeInsets.only(top: 2, bottom:40, left:0, right:0),
          ),
          // 底部历史记录区域，用Expanded撑满剩余高度
          Expanded(
            child: Center(
              child: Container(
                alignment: Alignment.center,
                width: double.infinity,
                decoration: BoxDecoration(
                  border: Border.all(
                    width: 1.5
                  ),
                  borderRadius: BorderRadius.circular(25)
                ),
                // 添加滚动条和滚动容器
                child: Scrollbar(
                  child: SingleChildScrollView(
                    padding: EdgeInsets.all(2.0),
                    child: Column(
                      children: [
                        Text("history events", style: TextStyle(fontSize: 20.0,color: Colors.blueGrey)),
                        // 后续新增的历史记录内容都放在该Column下即可
                      ],
                    ),
                  ),
                ),
              )
            ),
          )
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        setState(() {
          _scanQR();
        });
      },
      child: const Icon(Icons.qr_code),
      backgroundColor: Colors.pink,
    ),
  );
}

效果截图 #

原页面效果

修改后页面效果

内容的提问来源于stack exchange，提问作者Andrii Havrylyak