列内的 ListView 未正确展开

Question

我的 window 小部件：

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，但我希望它适合剩余的 space（底部按钮不应滚动，它们需要始终显示在底部）。当前结果：

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

Answer 1

只需从列的第二个子项中删除 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),
                    ),
                  ),
                ),
              )
            ],
          ),
        ),

Answer 2

这是由 flutter 正确呈现的，问题出在你这边。您在 Column 中使用 two expanded widgets，因为 screen space 可用分为 two equal parts。

这导致 first expanded widget 的大小只有可用列的一半，因此 ListView 达到屏幕中间的最大支出。

两个解决这个问题，让 ListView 占用所有可用的 space 你可以 remove expanded 小部件 from 第二个 child 即 Row.然后在 ListView property shrinkWrap 中将其设置为 true.

这里是代码片段

@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),
                    ),
                  ),
                ),
              )
            ],
          )
        ],
      ),
    );
  }

列内的 ListView 未正确展开

ListView inside column does not expanded correctly

listview

scroll

dart

flutter