如何讓 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()],
      ),
    ],
  ),