如何让Flutter的GridView项自适应不同屏幕尺寸完整显示

要实现4×3布局的键盘（1 2 3；4 5 6；7 8 9；. 0 x）并让其在任意屏幕尺寸下完整显示，需完成以下关键修改：

1. 定义匹配需求的按键文本列表
   替换原代码按序号生成文本的逻辑，用预设列表实现目标按键布局。

2. 修正GridView宽高比计算
   原代码的childAspectRatio设置错误，需根据3列4行的布局，结合可用空间的宽高计算每个按键的宽高比，确保所有按键刚好填满分配区域。

3. 优化键盘区域布局细节
   移除GridView默认间距，确保按键完全填充容器；保留禁止滚动的物理特性，让键盘始终完整展示。

修改后的完整代码 #

import 'package:flutter/material.dart';
import 'package:flutter_auto_size_text/flutter_auto_size_text.dart'; // 需添加此依赖到pubspec.yaml

void main() => runApp(const CurrencyConverter());

class CurrencyConverter extends StatefulWidget {
  const CurrencyConverter({Key? key}) : super(key: key);

  @override
  _CurrencyConverterState createState() => _CurrencyConverterState();
}

class _CurrencyConverterState extends State<CurrencyConverter> {
  String inputText1 = '0';
  String inputText2 = '0';
  // 对应4×3布局的按键文本列表
  final List<String> buttonTexts = ['1','2','3','4','5','6','7','8','9','.', '0','x'];

  @override
  Widget build(BuildContext context) => MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Currency Converter',
        theme: ThemeData(useMaterial3: true, primarySwatch: Colors.blue),
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Currency Converter',
                style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.w500)),
            centerTitle: true,
          ),
          body: Column(
            children: [
              // 输入栏区域
              ..._buildInputFields(),
              // 键盘区域：占据输入栏之外的全部剩余屏幕空间
              Expanded(
                child: LayoutBuilder(
                  builder: (BuildContext context, BoxConstraints constraints) {
                    // 计算按键宽高比：3列4行，宽为总宽/3，高为总高/4，宽高比 = (总宽/3)/(总高/4)
                    final double aspectRatio = (constraints.maxWidth / 3) / (constraints.maxHeight / 4);
                    return Container(
                      color: Colors.green,
                      child: GridView.count(
                        physics: const NeverScrollableScrollPhysics(),
                        crossAxisCount: 3,
                        childAspectRatio: aspectRatio,
                        // 移除默认间距，让按键完全填满容器
                        padding: EdgeInsets.zero,
                        mainAxisSpacing: 0,
                        crossAxisSpacing: 0,
                        children: buttonTexts.map((text) {
                          return Container(
                            decoration: BoxDecoration(
                              border: Border.all(
                                color: Colors.white,
                                width: 1,
                              ),
                            ),
                            child: Center(
                              child: Text(
                                text,
                                style: const TextStyle(
                                    color: Colors.white, fontSize: 24),
                              ),
                            ),
                          );
                        }).toList(),
                      ),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      );

  // 输入栏组件
  List<Widget> _buildInputFields() => [
        _buildTextField(Icons.monetization_on, inputText1, 'Bitcoin',
            const Color.fromARGB(255, 246, 247, 248)),
        _buildTextField(Icons.monetization_on, inputText2,
            'United States Dollar', const Color(0xFFf8f9fb)),
      ];

  Widget _buildTextField(IconData icon, String text, String hint, Color color) {
    return Container(
      padding: const EdgeInsets.all(16.0),
      color: Colors.blue,
      child: Row(
        children: [
          IconButton(icon: Icon(icon), onPressed: () {}),
          const SizedBox(width: 16.0), // 用SizedBox设置间距更规范
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                AutoSizeText(
                  text,
                  style: const TextStyle(
                      fontSize: 35, fontWeight: FontWeight.bold),
                  maxLines: 1,
                ),
                Text(hint,
                    style: const TextStyle(
                        fontSize: 14.0,
                        fontWeight: FontWeight.bold,
                        color: Colors.grey)),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

额外说明 #

1. 依赖添加：需在pubspec.yaml中添加flutter_auto_size_text依赖（原代码使用了该组件）：

   dependencies:
     flutter:
       sdk: flutter
     flutter_auto_size_text: ^3.0.0 # 请使用最新版本
   

2. 布局优化：移除GridView默认间距，避免按键间出现多余空隙；用SizedBox替代原代码中的Container(width:16.0)，是Flutter设置间距的标准写法。

内容的提问来源于stack exchange，提问作者Polarcode