Flutter Web上如何让Widget不溢出ListView答案

【问题标题】：How to make Widget not overflow ListView on Flutter WebFlutter Web上如何让Widget不溢出ListView
【发布时间】：2023-03-03 04:17:01
【问题描述】：

上下文：我正在尝试使用 Flutter 制作一个 Web 应用程序 - 所以这一切都在 Chrome 中

问题：我有一个图表，来自 charts_flutter 库，它在列中呈现正常。问题是我希望能够滚动并在图表下方添加更多内容。当我尝试将列更改为 ListView 时，它会溢出（似乎图表试图尽可能大并且 ListView 具有无限高度）。我不确定如何解决这个问题。

当前代码： 只是脚手架，因为我认为这里很重要

Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: ListView(
        children: <Widget>[
          Row(
            children: <Widget>[
              FlatButton(onPressed: (){
                print("flat button pressed");
              }, child: Text("Flat Button 1")),
              FlatButton(onPressed: (){
                print("flat button pressed");
              }, child: Text("Flat Button 2")),
              FlatButton(onPressed: (){
                print("flat button pressed");
              }, child: Text("Flat Button 3")),
            ],
            mainAxisAlignment: MainAxisAlignment.center,
          ),
          Flexible(child: GroupedStackedBarChart.withRandomData()),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );

【问题讨论】：

您是否尝试使用内部的 Column 将 ListView 更改为 SingleChildScrollView？然后，您可以使用 Expanded、Flexible 和 SizedBox 在图表中设置高度限制。

标签： flutter flutter-layout flutter-web

【解决方案1】：

我认为Flexible 导致图表填充父级的高度，这是无限的。尝试将其包装在 Column 中，以提供预先计算的大小。

body: ListView(
    children: <Widget>[
      Row(
        children: <Widget>[
          FlatButton(onPressed: (){
            print("flat button pressed");
          }, child: Text("Flat Button 1")),
          FlatButton(onPressed: (){
            print("flat button pressed");
          }, child: Text("Flat Button 2")),
          FlatButton(onPressed: (){
            print("flat button pressed");
          }, child: Text("Flat Button 3")),
        ],
        mainAxisAlignment: MainAxisAlignment.center,
      ),
      Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [GroupedStackedBarChart.withRandomData()],
      ),
    ],
  ),

【讨论】：

【解决方案2】：

好友只需将您的 Listview 包装为 Expanded 并使用 Column 展开您的小部件，如下所示：

body: Column(
        children: <Widget>[
          Expanded( 
            child: ListView(
              children: <Widget>[

              ],
            ),
          ),

【讨论】：