Flutter响应式设计求助：按钮适配与多端兼容问题解决

修改后的代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final screenSize = MediaQuery.of(context).size;
    return OrientationBuilder(builder: (context, orientation) {
      final isLandscape = orientation == Orientation.landscape;
      return Scaffold(
        body: Center(
          child: Container(
            height: screenSize.height * 0.25,
            width: screenSize.width * 0.7,
            margin: const EdgeInsets.only(top: 30),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Expanded(
                  flex: 1,
                  child: Container(
                    color: Colors.green,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        ButtonFlightPlanWindow(text: 'Procedures', fn: procedure),
                        ButtonFlightPlanWindow(text: 'Procedure', fn: procedure),
                        ButtonFlightPlanWindow(text: 'Procedu', fn: procedure),
                        ButtonFlightPlanWindow(text: 'Pro', fn: procedure),
                      ],
                    ),
                  ),
                ),
                Expanded(
                  flex: 6,
                  child: Container(
                    color: Colors.red,
                    height: screenSize.height * 0.3,
                    child: Column(
                      mainAxisSize: MainAxisSize.max,
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Center(
                          child: ResponsiveText(
                            text: "Routes",
                            baseFontSize: 20,
                          ),
                        ),
                        Container(
                          height: screenSize.width * 0.05,
                          color: Colors.blue,
                        )
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),
        ),
      );
    });
  }

  void procedure() {}
}

class ButtonFlightPlanWindow extends StatelessWidget {
  final String text;
  final VoidCallback fn;

  const ButtonFlightPlanWindow({
    super.key,
    required this.text,
    required this.fn,
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        return SizedBox(
          width: constraints.maxWidth * 0.9,
          height: constraints.maxHeight * 0.22,
          child: ElevatedButton(
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all(
                const Color.fromARGB(255, 62, 84, 122),
              ),
              padding: MaterialStateProperty.all(
                const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
              ),
            ),
            onPressed: fn,
            child: FittedBox(
              fit: BoxFit.scaleDown,
              child: Text(
                text,
                textAlign: TextAlign.center,
              ),
            ),
          ),
        );
      },
    );
  }
}

class ResponsiveText extends StatelessWidget {
  final String text;
  final double baseFontSize;

  const ResponsiveText({
    super.key,
    required this.text,
    required this.baseFontSize,
  });

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    double fontSize = baseFontSize;
    if (screenWidth < 360) {
      fontSize = baseFontSize * 0.8;
    } else if (screenWidth > 1200) {
      fontSize = baseFontSize * 1.3;
    }
    return Text(
      text,
      style: TextStyle(fontSize: fontSize, color: Colors.white),
    );
  }
}

关键修改说明 #

• 按钮文字自动缩放：用FittedBox包裹按钮内的Text，设置fit: BoxFit.scaleDown，当按钮空间不足时文字自动缩小避免溢出；通过LayoutBuilder获取父容器约束，动态设置按钮宽高比例，确保在绿色容器内合理分配空间。
• 弹性布局替换硬编码宽度：将原固定比例宽度替换为Expanded组件，通过flex比例分配空间，避免窗口缩放时的布局错位。
• 通用响应式文本组件：封装ResponsiveText，根据屏幕宽度动态调整字体大小，适配不同设备。

多端响应式设计思路 #

• 利用布局约束组件：
  • LayoutBuilder：获取父容器约束信息，根据可用空间动态调整子组件大小，适合局部布局适配。
  • OrientationBuilder：监听横竖屏切换，针对性调整布局结构（比如横屏时修改按钮排列方向）。
• 基于屏幕断点适配：
  • 定义设备宽度断点：手机（<600px）、平板（600px-1200px）、桌面/Web（>1200px），根据断点调整组件尺寸、布局结构（比如小屏时绿色容器改为横向排列按钮）。
• 避免硬编码数值：
  • 优先使用相对比例（屏幕宽高倍数）、弹性布局（Expanded/Flex）、BoxConstraints定义组件尺寸，不固定像素值。
  • 按钮、文本的间距、内边距也用相对值，比如EdgeInsets.symmetric(horizontal: screenWidth * 0.02)。
• 组件封装复用：
  • 将响应式文本、按钮等通用组件封装为独立Widget，统一处理适配逻辑，减少重复代码，方便维护。

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