面试题：Flutter中Material Design与Cupertino混合开发的布局适配问题

Question

在Flutter的Material Design与Cupertino混合开发场景下，假设你要在一个页面中同时使用Material风格的AppBar和Cupertino风格的按钮，如何确保在不同屏幕尺寸（如手机、平板）上布局能够自适应且保持美观？请描述实现思路并给出关键代码片段。

Answer 1

实现思路

1. 使用响应式布局：Flutter提供了LayoutBuilder和MediaQuery等工具来实现响应式布局。LayoutBuilder可以获取父容器的约束，MediaQuery能获取设备屏幕信息，根据不同的屏幕尺寸和方向调整布局。
2. AppBar部分：使用AppBar组件来构建Material风格的导航栏，它本身对不同屏幕尺寸有一定自适应能力，例如在平板上会有更多空间展示标题和操作按钮。
3. Cupertino按钮部分：使用CupertinoButton组件，通过LayoutBuilder或MediaQuery来动态调整按钮的大小、间距等属性，使其在不同屏幕尺寸上都能保持合适的视觉效果。
4. 整体布局：可以使用Scaffold作为页面的基本结构，将AppBar放在appBar属性中，将包含CupertinoButton的布局放在body中。

关键代码片段

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

class HybridPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('混合开发页面'),
      ),
      body: LayoutBuilder(
        builder: (context, constraints) {
          // 根据屏幕宽度调整按钮大小和间距
          double buttonWidth = constraints.maxWidth > 600? 150 : 100;
          double buttonSpacing = constraints.maxWidth > 600? 30 : 15;

          return Center(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                CupertinoButton(
                  child: Text('Cupertino按钮'),
                  onPressed: () {},
                  minSize: buttonWidth,
                ),
                CupertinoButton(
                  child: Text('另一个按钮'),
                  onPressed: () {},
                  minSize: buttonWidth,
                )
              ],
            ),
          );
        },
      ),
    );
  }
}

在上述代码中，LayoutBuilder获取屏幕宽度约束，根据屏幕宽度动态调整CupertinoButton的minSize以及按钮间的间距，AppBar部分直接使用默认的AppBar，保证在不同屏幕尺寸下都能自适应展示。