Gridview 填充根据目标变化

Question

我正在开发一个 Flutter 项目，其中有一个包含三个子项的 PageView。每个子级都包含一个构建 GridView 的 LayoutBuilder。

当我不指定任何填充时，网格看起来像这样：

但是，当我直接向 GridView 添加内边距或用内边距包裹它时，一切在桌面屏幕上看起来都是正确的，但在移动设备上，网格底部有额外的内边距或空间。

桌面视图（正确）：布局按预期显示，网格周围的填充保持一致。

移动视图（不正确）：在移动设备（以及使用 Flutter-pi 的 Raspberry Pi）上，同一网格在最后一行下方有额外的空间，即使那里没有设置额外的填充。

问题： 与桌面设备相比，为什么移动设备上的布局表现不同？如何确保所有平台上的 UI 一致，包括使用 Flutter-pi 嵌入 Raspberry Pi 时？

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        margin: const EdgeInsets.symmetric(
          vertical: 50.0,
        ),
        child: PageView(
          controller: PageController(
            initialPage: 0,
            viewportFraction: 0.9,
          ),
          children: const [
            GrindBuilderBeverages(
              backgroundColor: Colors.redAccent,
              rows: 4,
              columns: 4,
              crossAxisSpacing: 15.0,
              mainAxisSpacing: 20.0,
            ),
            GrindBuilderBeverages(
              backgroundColor: Colors.purpleAccent,
              rows: 3,
              columns: 3,
              crossAxisSpacing: 10.0,
              mainAxisSpacing: 10.0,
            ),
            GrindBuilderBeverages(
              backgroundColor: Colors.greenAccent,
              rows: 2,
              columns: 5,
              crossAxisSpacing: 5.0,
              mainAxisSpacing: 5.0,
            ),
          ],
        ),
      ),
    );
  }
}

class GrindBuilderBeverages extends StatelessWidget {
  final Color backgroundColor;
  final int rows;
  final int columns;
  final double crossAxisSpacing;
  final double mainAxisSpacing;

  const GrindBuilderBeverages(
      {super.key,
      required this.backgroundColor,
      required this.rows,
      required this.columns,
      required this.crossAxisSpacing,
      required this.mainAxisSpacing});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 16.0),
      decoration: BoxDecoration(
        color: backgroundColor,
        borderRadius: BorderRadius.circular(16.0),
      ),
      child: LayoutBuilder(
        builder: (context, constraints) {
          // Calculate the childAspectRatio based on the available width and height
          final double totalHorizontalSpacing = (columns - 1) * crossAxisSpacing;
          final double totalVerticalSpacing = (rows - 1) * mainAxisSpacing;

          final double itemWidth =
              (constraints.maxWidth - totalHorizontalSpacing) / columns;
          final double itemHeight =
              (constraints.maxHeight - totalVerticalSpacing) / rows;
          final double aspectRatio = itemWidth / itemHeight;

          return GridView.builder(
            padding: const EdgeInsets.all(16.0),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: columns, // Set the number of columns
              childAspectRatio: aspectRatio, // Dynamic aspect ratio
              crossAxisSpacing: crossAxisSpacing, // Horizontal spacing
              mainAxisSpacing: mainAxisSpacing, // Vertical spacing
            ),
            itemCount: rows * columns, // Total number of items
            itemBuilder: (context, index) {
              return Container(
                color: Colors.white.withOpacity(0.5),
                child: Center(
                  child: Text(
                    'Item $index',
                    style: const TextStyle(color: Colors.black),
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

Answer 1

一个简单的解决方案是根据平台更改代码，您可以使用

'dart:io'

库来完成这样的事情。

这是一个例子：

import'dart:io' show Platform;
void main(){
   if(Platform.isIOS){
     //make the Grid for the IOS
   }else if(Platform.isAndroid){
     //make the Grid for the Android
   }else if (Platform.isWindows) {
     // make the Grid for the Windows
   }else if(Platform.isMacOS){
     //make the Grid for the MacOS
}

您可以从 Flutter 文档中探索更多内容并了解如何使用它：https://flutter.dev/