面试题：Flutter中Material与Cupertino Design混合使用的基础布局问题

Question

在一个Flutter项目中，要求在屏幕上半部分使用Material Design风格的AppBar，下半部分使用Cupertino Design风格的按钮，简述实现思路并写出关键代码。

Answer 1

实现思路

1. 在Flutter项目中，外层使用Scaffold构建基本页面结构。
2. 在Scaffold的appBar属性中，设置AppBar来实现Material Design风格的头部。
3. 在Scaffold的body部分，使用Column将屏幕分为上下两部分，下半部分使用CupertinoButton实现Cupertino Design风格的按钮。

关键代码

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('混合风格示例'),
        ),
        body: Column(
          children: [
            Expanded(
              child: Container(), // 上半部分占位
            ),
            CupertinoButton(
              child: const Text('Cupertino按钮'),
              onPressed: () {},
            ),
          ],
        ),
      ),
    );
  }
}