Flutter 教程（十）主题

如下代码所示，当我们创建一个新 Flutter 项目时，会在 theme 属性中赋值 ThemeData 对象。其中 theme 属性就是主题的入口，该 ThemeData 对象就是设置的对应主题。

scala 复制代码

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

ThemeData

ThemeData 组件包含项目能设置的所有主题样式，其中最常用的属性有primarySwatch、primaryColor、accentColor等27种。ThemeData 常用的属性如下图所示：

注意：ThemeData 包含一些组件的属性，比如 TextField 组件的文本提示颜色 hintColor。如果改变了 ThemeData 中 hintColor 的值则会对全局的 TextField 组件造成影响。但是我们可以在 TextField 组件的 hintStyle 中自定义 hintColor 的颜色，此时在局部小组件中单独设置的主题样式会覆盖全局主题设置的样式

根据上图的属性，我们可以对 ThemeData 的属性进行一些自定义的设置，代码示例如下：

less 复制代码

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.deepOrangeAccent,
        accentColor: Colors.yellow,
        primarySwatch: Colors.red,
        hintColor: Colors.blue,
        brightness: Brightness.light,
        buttonTheme: ButtonThemeData(
          textTheme: ButtonTextTheme.accent,
          buttonColor: Colors.greenAccent,
        ),
      ),
      home: MyHomePage(title: '主题设置'),
    );
  }
}

效果如下图所示：

局部主题

上面在 MaterialApp 中设置的主题是全局生效的。如果你只想要在单个组件应用对应的主题，可以使用 Theme 组件。代码示例如下：

less 复制代码

// 方式一
new Theme(
   data: new ThemeData(
     hintColor: Colors.yellow,
   ),
   child: TextField(
     keyboardType: TextInputType.emailAddress,
     decoration: InputDecoration(
       hintText: '提示文本',
       prefixIcon: Icon(Icons.all_inclusive),
     ),
   ),
),

// 方式二
new Theme(
   data:Theme.of(context).copyWith(hintColor: Colors.yellow),
   child: TextField(
     keyboardType: TextInputType.emailAddress,
     decoration: InputDecoration(
       hintText: '提示文本',
       prefixIcon: Icon(Icons.all_inclusive),
     ),
   ),
),

主题换肤

less 复制代码

class ThemePage extends StatefulWidget {
  ThemePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _ThemePageState createState() => _ThemePageState();
}

class _ThemePageState extends State<ThemePage> {

  List<Color> _colorList=[    Colors.yellow,    Colors.greenAccent,    Colors.indigo,    Colors.black38,    Colors.red,    Colors.deepPurpleAccent,    Colors.brown,    Colors.indigo,    Colors.pinkAccent  ];

  Color _color=Colors.yellow;

  @override
  Widget build(BuildContext context) {
    return new Theme(
      data: Theme.of(context).copyWith(primaryColor: _color),
      child: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: GridView.builder(
          padding: EdgeInsets.only(left: 0,top: 100,right: 0,bottom: 0),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            mainAxisSpacing: 20,
            crossAxisSpacing: 20,
            childAspectRatio: 1,
          ),
          itemBuilder: (BuildContext context,int index){
            return GestureDetector(
              child: Container(
                color: _colorList[index],
              ),
              onTap: (){
                _color=_colorList[index];
                setState(() {

                });
              },
            );
          },
          itemCount: 9,
        ),
      ),
    );
  }
}

参考

7.4 颜色和主题 | 《Flutter实战·第二版》