列内的 ListView 未正确展开答案

【问题标题】：ListView inside column does not expanded correctly列内的 ListView 未正确展开
【发布时间】：2021-11-05 22:49:20
【问题描述】：

我的窗口小部件：

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          globals.strings["add_event_title"],
          style: TextStyle(
            fontSize: 18,
            color: AppTheme.darkText,
            fontWeight: FontWeight.w400,
          ),
        ),
      ),
      body: Column(
        children: [
          Expanded(
            child: Align(
              alignment: FractionalOffset.topLeft,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: AddEventWidget.withData(
                  categories: widget.categories,
                  geojson: widget.geojson,
                  address: widget.address,
                ),
              ),
            ),
          ),
          Expanded(
            child: Align(
              alignment: FractionalOffset.bottomCenter,
              child: Row(
                children: [
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: SizedBox(
                      width: MediaQuery.of(context).size.width / 2 - 16,
                      child: RaisedButton(
                        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24.0)),
                        onPressed: () => {},
                        padding: EdgeInsets.all(12.0),
                        color: AppTheme.buttonConfirm,
                        child: Text(
                          globals.strings["add_event_button_confirm"],
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                    ),
                  ),
                  Spacer(),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: SizedBox(
                      width: MediaQuery.of(context).size.width / 2 - 16,
                      child: RaisedButton(
                        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24.0)),
                        onPressed: () => Navigator.of(context).pop(),
                        padding: EdgeInsets.all(12.0),
                        color: AppTheme.buttonCancel,
                        child: Text(
                          globals.strings["add_event_button_cancel"],
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
          )
        ],
      ),
    );
  }

AddEventWidget 实际上是 ListBox，如果没有空间显示所有控件，则可以滚动内容。为了测试，它目前填充了文本小部件：

Widget build(BuildContext context) {
    return ListView(
      children: [
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),

      ],
    );
  }

因此，我确实获得了可滚动的 ListView，但我希望它适合剩余空间（底部按钮不应滚动，它们需要始终显示在底部）。当前结果：

任何想法如何获得我需要的效果？为什么我的 ListView 没有展开以适应没有重叠底部按钮的剩余空间？

【问题讨论】：

标签： flutter dart listview scroll

【解决方案1】：

这是由颤动正确呈现的，问题就在你身上。您在Column 中使用two expanded widgets，因为可用的screen space 分为two equal parts。

这导致first expanded widget 的大小为可用列的一半，因此ListView 在屏幕中间达到最大消耗。

两个解决这个问题并让ListView 占用所有可用空间你可以remove expanded 小部件from 第二个孩子，即Row。然后在ListView propertyshrinkWrap 中将其设置为true。

代码 sn-p 在这里

@override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "add_event_title",
          style: TextStyle(
            fontSize: 18,
            color: Colors.blue,
            fontWeight: FontWeight.w400,
          ),
        ),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(
            child: Align(
              alignment: FractionalOffset.topLeft,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child:ListView.builder(
                  itemBuilder: (BuildContext context,int index){
                    return Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa");
                  },
                  itemCount: 100,
                  shrinkWrap: true,
                ),
              ),
            ),
          ),
          Row(
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: SizedBox(
                  width: MediaQuery.of(context).size.width / 2 - 16,
                  child: RaisedButton(
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24.0)),
                    onPressed: () => {},
                    padding: EdgeInsets.all(12.0),
                    color: Colors.green,
                    child: Text(
                      "confirm",
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              ),
              Spacer(),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: SizedBox(
                  width: MediaQuery.of(context).size.width / 2 - 16,
                  child: RaisedButton(
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24.0)),
                    onPressed: () => Navigator.of(context).pop(),
                    padding: EdgeInsets.all(12.0),
                    color: Colors.black45,
                    child: Text("cancel",
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              )
            ],
          )
        ],
      ),
    );
  }

【讨论】：

感谢详细解释

【解决方案2】：

只需从列的第二个子列中删除 Expanded，如下所示：

 Align(
          alignment: FractionalOffset.bottomCenter,
          child: Row(
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: SizedBox(
                  width: MediaQuery.of(context).size.width / 2 - 16,
                  child: RaisedButton(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(24.0)),
                    onPressed: () => {},
                    padding: EdgeInsets.all(12.0),
                    child: Text(
                      'globals.strings["add_event_button_confirm"]',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              ),
              Spacer(),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: SizedBox(
                  width: MediaQuery.of(context).size.width / 2 - 16,
                  child: RaisedButton(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(24.0)),
                    onPressed: () => Navigator.of(context).pop(),
                    padding: EdgeInsets.all(12.0),
                    child: Text(
                      'globals.strings["add_event_button_cancel"]',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              )
            ],
          ),
        ),

【讨论】：

它有效，你能解释一下为什么在这种情况下我需要删除 Expanded 吗？
阅读 ritik kumar srivastava 的解释，他说的是真的，这就是原因，但 shrinkWrap = true 不是必需的，它也会降低性能。