Flutter listview 底部溢出答案

【问题标题】：Flutter listview bottom overflowFlutter listview 底部溢出
【发布时间】：2019-05-27 05:01:17
【问题描述】：

我正在尝试在还包含静态图像的容器内创建一个可滚动的列表视图。但是，列表视图似乎不可滚动，并且在我的应用程序上出现“底部溢出 x 像素”伪影。

  static List<Widget> getClubs() {
    var myClubs = new List<Widget>();
    for (var i = 0; i < 10; i++) {
      myClubs.add(new Padding(
          padding: EdgeInsets.all(8.0),
          child: new CircleAvatar(
            backgroundImage:
                new NetworkImage("https://i.imgur.com/p2oUDLD.png"),
            backgroundColor: Colors.black,
            radius: 34.0,
          )));
    }
    return myClubs;
  }

  final leftSection = new Container(
      color: Color(0xFF212121),
      width: 100,
      child: Column(
        children: <Widget>[
          SizedBox(height: 20.0),
          new Image.asset(
            'assets/logo.png',
            alignment: Alignment.center,
          ),
          SizedBox(height: 10.0),
          new Container(
              child: new ListView(
            shrinkWrap: true,
            padding: const EdgeInsets.all(5.0),
            children: getClubs(),
          ))
        ],
      ));

【问题讨论】：

标签： dart flutter

【解决方案1】：

我在一行中使用了 Flexible 来控制列表视图构建器的输出

定义 scollController

    final _scrollController = ScrollController();

定义 ListView 构建器

    ListView builder = ListView.builder(
    itemCount: listPerformance?.length,
    shrinkWrap: true,
    itemBuilder: (context, index) {
      return PerformanceCardWidget(performanceView: listPerformance[index]);
    });

定义一个灵活的输出列表视图构建器内容

    Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
    Flexible(
          flex: 6,
          fit: FlexFit.loose,
          child: Scrollbar(
              isAlwaysShown: true,
              controller: _scrollController,
              child: SingleChildScrollView(
                  controller: _scrollController, child: builder))
          )
     ])

【讨论】：

【解决方案2】：

将 Column 包装在 Expanded 小部件中：

Expanded(
  child: Column(
  ),
),

另一种方法是将 Column 包装在一个灵活的小部件中并指定一个弹性因子。

Flexible(
           flex: 1,
           child: Column(
            children: [
                      
                  ],
               ),
           ),

【讨论】：

【解决方案3】：

有时修复估计高度的最佳方法是使用sizedbox

      int heightToBeReduced = 380;

      SizedBox(
        height: MediaQuery.of(context).size.height - heightToBeReduced,
        child: ListView....
      )

【讨论】：

【解决方案4】：

我还建议Wrap 解决任何遇到列表视图中容器大小错误导致溢出的问题：

                          new Container(
                             alignment: Alignment.center,
                             child: Wrap( //the magic
                               children: [
                                 new Container(),
                               ],
                             ),
                           ),

【讨论】：

【解决方案5】：

您可以使用Expanded 小部件或设置容器的高度。

【讨论】：

是的！这么简单的事情花了很长时间才弄清楚。谢谢。
@Zander17 +1 那