如何为每个设备找到正确的纵横比？答案

【问题标题】：How to find correct aspect ratio for every device?如何为每个设备找到正确的纵横比？
【发布时间】：2020-10-15 00:01:06
【问题描述】：

早上好，

很多时候我都面临着一个关于 Flutter GridView 小部件的响应性的大问题。这是我在 iPad Pro 12.9 上的卡片列表

这是在 iPad Air 2 上

这是卡号

class HomeCard extends StatelessWidget {
  final String title;
  final String subtitle;
  final String category;
  final String imgUrl;

  const HomeCard({
    Key key,
    this.title,
    this.subtitle,
    this.category,
    this.imgUrl,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final Brightness _brightness = Theme.of(context).brightness;

    return SingleChildScrollView(
      physics: const NeverScrollableScrollPhysics(),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          AspectRatio(
            aspectRatio: 16 / 9,
            child: CachedNetworkImage(
              imgUrl: imgUrl,
              fit: BoxFit.fitWidth,
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 10.0, left: 25.0),
            child: Text(
              title,
              textAlign: TextAlign.left,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                  color: Themes.cardTitleBlue,
                  fontWeight: FontWeight.w500,
                  fontSize: 16.0),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 25.0, right: 25.0),
            child: Text(
              subtitle, //'Something else only for fill this space. It can be a simply description',
              textAlign: TextAlign.left,
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                fontWeight: FontWeight.w400,
                fontSize: 15.0,
                height: 1.2,
                color: _brightness == Brightness.light
                    ? Colors.black45
                    : Colors.white54,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

这是GridView 代码

GridView.builder(
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2,
                        crossAxisSpacing: 4.0,
                        mainAxisSpacing: 4.0,
                        childAspectRatio:
                            MediaQuery.of(context).size.aspectRatio/0.8,
                      ),
                      controller: _scrollController,
                      itemCount: state.hasReachedMax
                          ? state.tours.length
                          : state.tours.length + 1,
                      itemBuilder: (context, index) {
                        if (index >= state.tours.length) {
                          return const MyLoader();
                        } else {
                          return _getCard(state.tours[index]);
                        }
                      },
                    ),

每个设备的纵横比都不同，而且如果我基于此应用校正，也有一些设备的卡片布局被切割或超过高度。我的卡片没有固定高度，因为我希望它能够根据图像和文本自行调整。请不要建议我使用staggered_grid_view 包，因为有时我使用它的性能很低。我只需要为行/行显示一个包含 2/3 项的卡片列表，并且需要从卡片高度继承高度。 StackOverflow 上有很多帖子讨论了这一点，但没有人考虑所有设备的布局和动态卡片高度。

希望我清楚

谢谢

【问题讨论】：

这可能有帮助：medium.com/flutter-community/…

标签： flutter dart flutter-layout

【解决方案1】：

我有一个想法...首先请查看此答案以查找大小使用overlayEntery 构建期间的小部件

How to get a height of a Widget?

然后在childAspectRatio 中为您的网格视图设置正确的纵横比（使用overlayEntery 测量）。

对于从 Child 向 Parent 发送数据，这篇文章可以帮助...

https://medium.com/flutter-community/flutter-communication-between-widgets-f5590230df1e

希望对你有所帮助。

编辑：我在这里根据这个想法制作了一个完整的工作示例：

How to calculate childAspectRatio for GridView.builder in flutter

【讨论】：