面试题：Flutter中Cupertino Design组件的样式定制与主题应用

Question

假设你正在开发一个使用Cupertino Design风格的应用，要求对CupertinoTextField的输入框边框颜色、文字颜色以及placeholder颜色进行自定义，同时要将这些自定义样式集成到应用的主题中，以便在不同页面统一管理，描述具体实现步骤和关键代码。

Answer 1

1. 创建主题类：
   • 在Flutter中，通过创建一个自定义的CupertinoThemeData类来管理应用主题。
   • 示例代码：

class MyCupertinoTheme {
  static final CupertinoThemeData theme = CupertinoThemeData(
    textTheme: CupertinoTextThemeData(
      textStyle: TextStyle(
        color: Colors.blue, // 文字颜色
      ),
      placeholderTextStyle: TextStyle(
        color: Colors.grey, // placeholder颜色
      )
    ),
    textFieldTheme: CupertinoTextFieldThemeData(
      decoration: BoxDecoration(
        border: Border.all(color: Colors.red), // 边框颜色
      )
    )
  );
}

2. 应用主题：
   • 在应用的顶层CupertinoApp或相关父级CupertinoTheme组件中应用该主题。
   • 示例代码：

void main() {
  runApp(
    CupertinoApp(
      theme: MyCupertinoTheme.theme,
      home: MyHomePage(),
    )
  );
}

3. 使用主题样式：
   • 在需要使用CupertinoTextField的页面中，直接使用该组件，它会自动应用主题中定义的样式。
   • 示例代码：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: Center(
        child: CupertinoTextField(
          placeholder: '输入内容',
        )
      )
    );
  }
}

这样就实现了对CupertinoTextField的输入框边框颜色、文字颜色以及placeholder颜色的自定义，并集成到应用主题中统一管理。