Flutter：谷歌图表库图表大小/列

Question

我正在尝试使用 Google 的图表库 (https://github.com/google/charts) 制作相同的图表。 我的问题如下：我试图将图表放在顶部，然后是文本中的按钮。

但每次，如果我尝试在如下列中绘制图表：

 Column(
      children: [
          LineChart(seriesList),
      ],
    );
  }

我需要将 LineChart 包装在一个扩展中（我并不真正想要的），所以我不会收到错误消息。 是否有任何选项可以将 google-charts 强制为特定大小，例如一半的屏幕？

Answer 1

有很多不同的方式。

1.随着AspectRatio

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          AspectRatio(
            aspectRatio: 2 * MediaQuery.of(context).size.aspectRatio,
            child: SimpleLineChart.withSampleData(),
          ),
        ],
      ),
    );
  }
}

用SizedBox

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          SizedBox(
              height: MediaQuery.of(context).size.height / 2,
              child: SimpleLineChart.withSampleData()),
        ],
      ),
    );
  }
}

带有 ConstrainedBox

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          ConstrainedBox(
              constraints: BoxConstraints.loose(Size(
                double.infinity,
                MediaQuery.of(context).size.height / 2,
              )),
              child: SimpleLineChart.withSampleData()),
        ],
      ),
    );
  }
}

使用 ListView，指定 itemExtent

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        itemExtent: MediaQuery.of(context).size.height / 2,
        children: [
          SimpleLineChart.withSampleData(),
        ],
      ),
    );
  }
}

...

...