如何让 Widget 在 Flutter Web 上不溢出 ListView

Question

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

问题：我有一个来自charts_flutter库的图表，它在列内呈现正常。 问题是我希望能够滚动并在图表下方添加更多内容。 当我尝试将列更改为 ListView 时，它溢出（似乎 Chart 试图尽可能大并且 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.
    );

Answer 1

buddy 只是用Expanded包装你的Listview并用Column像这样扩展你的小部件：

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

              ],
            ),
          ),

Answer 2

我认为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()],
      ),
    ],
  ),