Day15 - Flutter - 主题风格

概述

主题风格
暗黑Theme适配

一、主题风格

Theme分为：全局Theme和局部Theme
主题有两个作用：

设置了主题之后，某些Widget会自动使用主题的样式（比如AppBar的颜色）

将某些样式放到主题中统一管理，在应用程序的其它地方直接引用

1.1. 全局Theme
全局Theme会影响整个app的颜色和字体样式。
使用起来非常简单，只需要向MaterialApp构造器传入 ThemeData 即可。
如果没有设置Theme，Flutter将会使用预设的样式。当然，我们可以对它进行定制。

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

class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
        return MaterialApp(
          title: 'FlutterDemo',
          // 正常模式
          theme: ThemeData(
            // 1.亮度: light-dark，一般theme我们设置 light，在darkTheme里面设置dark
            brightness: Brightness.light,
            // 2.primarySwatch: primaryColor/accentColor的结合体
            primarySwatch: Colors.red,
            // 3.主要颜色: 导航/底部TabBar
            primaryColor: Colors.blue,
            // 4.次要颜色: FloatingActionButton/按钮颜色
            accentColor: Colors.brown,
            // 5.卡片主题
            cardTheme: CardTheme(
               color: Colors.greenAccent,
               elevation: 10,
               shape: Border.all(width: 3, color: Colors.red),
               margin: EdgeInsets.all(10)
            ),
            // 6.按钮主题
            buttonTheme: ButtonThemeData(
              minWidth: 0,
              height: 25
            ),
            // 7.文本主题
            textTheme: TextTheme(
              subtitle1: TextStyle(fontSize: 20),
              headline1: TextStyle(fontSize: 10),
            ),
            splashColor: Colors.transparent,
            // 点击的水波纹设置为无色
            highlightColor: Colors.transparent
          ),
          // 暗黑模式
          darkTheme: ThemeData(

          ), 
       );
   }
}

1.2. 局部Theme
如果某个具体的Widget不希望直接使用全局的Theme，而希望自己来定义，只需要在Widget的父节点包裹一下Theme即可
创建另外一个新的页面，页面中使用新的主题：在新的页面的Scaffold外，包裹了一个Theme，并且设置data为一个新的ThemeData

class JKSecondPage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Theme(
           data: ThemeData(),
           child: Scaffold(
           ),
        );
    }
}

但是，我们很多时候并不是想完全使用一个新的主题，而且在之前的主题基础之上进行修改：

class HYSecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
       return Theme(
          data: Theme.of(context).copyWith(
              primaryColor: Colors.greenAccent
          ),
          child: Scaffold(
          ),
       );
  }
}

提示一：我们想要自己改的主题的内容可以在 Theme.of(context).copyWith( )里面修改
提示二：注意事项：accentColor 在这里并不会被覆盖, 如果想要修改局部变量的 accentColor 我们可以如下做, secondary 才是修改的颜色，而 accentColor 是无效的
floatingActionButton: Theme(
    data: Theme.of(context).copyWith(
      colorScheme: Theme.of(context).colorScheme.copyWith(
         secondary: Colors.pink,
      )
    ),
    child: FloatingActionButton(
      child: Icon(Icons.add),
      onPressed: () {
    
      },
    ),
),

二. 暗黑Theme适配

2.1. darkTheme
目前很多应用程序都需要适配暗黑模式，Flutter中如何做到暗黑模式的适配呢？
事实上，MaterialApp中有theme和dartTheme两个参数：
按照下面的写法，我们已经默认适配了暗黑主题

class MyApp extends StatelessWidget {
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
       return MaterialApp(
          title: 'Flutter Demo',
          // 正常的模式
          theme: ThemeData.light(),
          // 暗黑模式
          darkTheme: ThemeData.dark(),
          home: HYHomePage(),
       );
    }
}

2.2. 开发中适配
在开发中，为了能适配两种主题（设置是更多的主题），我们可以封装一个AppTheme

1.公共的样式抽取成常量
2.封装一个亮色主题

3.封装一个暗黑主题

import 'package:flutter/material.dart';
class JKAppTheme {

   // 字体的设置
   static const double smallFontSize = 12.0;
   static const double normalFontSize = 16.0;
   static const double largeFontSize = 22.0;

   // 颜色的设置
   // 正常的颜色
   static final Color normalTextColor = Colors.brown;
   // 暗黑模式的字体颜色
   static final Color darkTextColor = Colors.yellow;

   // 正常的模式
   static final ThemeData normalTheme = ThemeData(
        primaryColor: Colors.yellow,
        textTheme: TextTheme(
           subtitle1: TextStyle(
              fontSize: normalFontSize, 
              color: normalTextColor
           )
        )
   );

   // 暗黑模式
   static final ThemeData darkTheme = ThemeData(
       primaryColor: Colors.yellow,
       textTheme: TextTheme(
           subtitle1: TextStyle(
              fontSize: normalFontSize,
              color: darkTextColor
           )
       )
   );
}

在MaterialApp中，可以决定使用哪一个主题：

class MyApp extends StatelessWidget {
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Flutter Demo',
            theme: AppTheme.lightTheme,
            darkTheme: AppTheme.darkTheme,
            home: HYHomePage(),
        );
    }
}

提示：MaterialApp 里面的title再iOS里面是没啥用的，在安卓了里面是有用的