面试题：Flutter中Material与Cupertino组件库在布局实现上的主要区别

Question

请阐述Flutter中Material与Cupertino组件库在布局实现方面存在哪些主要的不同点，结合具体的组件示例说明。

Answer 1

设计风格

• Material：遵循Material Design规范，具有强烈的视觉层次感和丰富的动画效果。例如ElevatedButton，通过阴影和涟漪效果增强交互反馈。

ElevatedButton(
  onPressed: () {}, 
  child: Text('Material Button')
)

• Cupertino：模仿iOS设计风格，强调简洁、扁平，注重与iOS原生交互的一致性。如CupertinoButton，在按下时会有轻微的缩放效果。

CupertinoButton(
  onPressed: () {}, 
  child: Text('Cupertino Button')
)

布局特点

• Material：布局相对灵活，通过Scaffold提供了标准的布局结构，如appBar、body、bottomNavigationBar等。以ListView为例，ListView在Scaffold的body中可方便地展示列表数据。

Scaffold(
  appBar: AppBar(
    title: Text('Material List'),
  ),
  body: ListView(
    children: <Widget>[
      ListTile(title: Text('Item 1')),
      ListTile(title: Text('Item 2')),
    ],
  ),
);

• Cupertino：在布局上更贴近iOS原生布局方式，例如CupertinoPageScaffold，它的navigationBar样式更接近iOS导航栏。CupertinoTabView用于实现类似iOS底部标签栏的布局。

CupertinoPageScaffold(
  navigationBar: CupertinoNavigationBar(
    middle: Text('Cupertino Page'),
  ),
  child: Center(
    child: Text('Content'),
  ),
);

主题定制

• Material：通过ThemeData可对整个应用的主题进行定制，包括颜色、字体等。比如修改primaryColor来改变应用的主色调。

MaterialApp(
  theme: ThemeData(
    primaryColor: Colors.blue,
  ),
  home: MyHomePage(),
);

• Cupertino：使用CupertinoThemeData定制主题，主要是为了适配iOS风格，如改变barBackgroundColor来调整导航栏等栏目的背景颜色。

CupertinoApp(
  theme: CupertinoThemeData(
    barBackgroundColor: Colors.green,
  ),
  home: MyCupertinoHomePage(),
);