面试题：Flutter中Cupertino风格与Material风格的主要区别

Question

请阐述在Flutter中，Cupertino风格（iOS风格）应用与Material风格（安卓风格）应用在布局、组件外观、交互方式等方面的主要区别，并举例说明如何在代码中实现Cupertino风格的特定组件，如CupertinoButton。

Answer 1

布局

• Material风格：倾向于使用基于卡片（Card）和布局容器（如Column、Row、Container等）的布局方式，注重空间的利用和视觉层次。例如，一个包含标题、描述和图片的卡片布局，可以使用Column将它们垂直排列，图片放在上方，标题和描述依次在下方。

Card(
  child: Column(
    children: [
      Image.asset('image.jpg'),
      Text('标题'),
      Text('描述')
    ],
  ),
);

• Cupertino风格：布局上更强调简洁和直接，通常使用较少的嵌套布局。例如，在iOS应用中常见的列表布局，会使用CupertinoListTile直接在CupertinoListView.builder中构建，而不是像Material风格那样可能会在列表项中嵌套更多容器。

CupertinoListView.builder(
  itemCount: 10,
  itemBuilder: (context, index) {
    return CupertinoListTile(
      title: Text('列表项 $index'),
    );
  },
);

组件外观

• Material风格：组件外观遵循Material Design规范，有明显的阴影、圆角和鲜艳的色彩。例如，Material风格的按钮（ElevatedButton）有一定的阴影，形状为矩形且通常有圆角。

ElevatedButton(
  onPressed: () {},
  child: Text('按钮'),
);

• Cupertino风格：组件外观更简洁、扁平，颜色相对柔和，更接近iOS原生外观。例如，Cupertino风格的按钮（CupertinoButton）在iOS上通常是扁平的，按下时有颜色变化和轻微的缩放效果。

交互方式

• Material风格：有一些独特的交互，如浮动操作按钮（FloatingActionButton），点击后可以触发一些常用操作，并且有展开和收起的动画。此外，侧滑菜单（Drawer）也是常见交互。

Scaffold(
  appBar: AppBar(),
  drawer: Drawer(
    child: ListView(
      children: [
        ListTile(title: Text('菜单项1')),
        ListTile(title: Text('菜单项2')),
      ],
    ),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
);

• Cupertino风格：更注重手势交互，如在列表上的左滑删除、长按时的复制粘贴等iOS原生交互。例如，CupertinoNavigationBar在iOS上有特定的返回手势交互。

实现Cupertino风格特定组件 - CupertinoButton

CupertinoButton(
  onPressed: () {
    // 按钮点击逻辑
  },
  child: Text('Cupertino按钮'),
  color: CupertinoColors.activeBlue, // 按钮颜色
  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10), // 内边距
);