卡内 Flutter ListView答案

【问题标题】：Flutter ListView inside Card卡内 Flutter ListView
【发布时间】：2019-03-21 00:46:16
【问题描述】：

我想要一个有 3 张卡片的屏幕。一张卡片是 CotrolWidget（顶部固定高度），第二张卡片是 MeasurementsList（顶部下方，应垂直填充），第三张卡片是 ChartWidget（顶部下方，位于 MeasurementsList 右侧，应垂直填充）。

return Scaffold(
  appBar: AppBar(title: new Text('Measurements')),
  body: new Container(
      padding: EdgeInsets.all(8.0),
      decoration: BoxDecoration(color: Colors.black12),
      child: Column(
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Row(children: [ControlsWidget(device)]),
          Row(
            children: <Widget>[
              MeasurementList(device)
              ,
              ChartWidget(device)
            ],
          )
        ],
      )),
);

在测量卡中，我想要一个 ListView。但是当我使用Expaded时，ListView会扩展屏幕并且列表不可滚动

Widget build(BuildContext context) {
return Expanded(
  flex: 1,
  child: Card(
    elevation: 4.0,
    child: ListView.builder(
      scrollDirection: Axis.horizontal,
      itemBuilder: (context, index) {
        return ListTile(title: Text(measurements[index]));
      },
      itemCount: measurements.length,
      shrinkWrap: true,
    ),
  ),
);

}

那么，如何在里面创建一个带有 ListView 的卡片呢？

【问题讨论】：

GridView 适合你吗？
很遗憾没有，因为根据屏幕尺寸，会有 3 张不同尺寸的卡片
您可以尝试将 scrollDirection: Axis.horinzontal 更改为 Axis.vertical 吗？
它没有帮助。结果还是一样
所以，如果我理解正确 - 您根据屏幕宽度设置第二张卡片的宽度。那么第二张卡片的高度呢？它必须有多大？

标签： listview flutter

【解决方案1】：

尝试使用MediaQuery 作为高度。

MediaQueryData queryData; queryData = MediaQuery.of(context);

然后在高度使用

height: queryData.size.height - height_of_ControlsWidget

【讨论】：

什么高度？我不认为这会有所帮助，但我会尝试。
您可以将卡片包裹在容器中并设置容器的高度。
试试这个：Card( child: new SizedBox( height: your_height, child: new Center( child: new Text('First card'), ), ), ),
是的，设置大小会起作用，但这是“黑客行为”。问题是，我要设置size height：queryData.size.height - someNumber，其中someNumber，不是ControlWidget的高度，而是一些不同的数字，无法计算。在我的情况下，我的 ControlWidget 高度为 48，而 someNumber 为 168。我试图通过填充和 appbar 高度的总和来弄清楚这个数字可能是多少，但它不是 168