Flutter實戰(zhàn) 多語言和多主題

本實例 APP 中語言和主題都是可以設置的，而兩者都是通過ChangeNotifierProvider來實現的：我們在main函數中使用了Consumer2，依賴了ThemeModel和LocaleModel，因此，當我們在語言和主題設置頁更該當前的配置后，Consumer2的builder都會重新執(zhí)行，構建一個新的MaterialApp，所以修改會立即生效。下面看一下語言和主題設置頁的實現。

#15.8.1 語言選擇頁

APP 語言選擇頁提供三個選項：中文簡體、美國英語、跟隨系統(tǒng)。我們將當前 APP 使用的語言高亮顯示，并且在后面添加一個“對號”圖標，實現如下：

class LanguageRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var color = Theme.of(context).primaryColor;
    var localeModel = Provider.of<LocaleModel>(context);
    var gm = GmLocalizations.of(context);
    //構建語言選擇項
    Widget _buildLanguageItem(String lan, value) {
      return ListTile(
        title: Text(
          lan,
          // 對APP當前語言進行高亮顯示
          style: TextStyle(color: localeModel.locale == value ? color : null),
        ),
        trailing:
            localeModel.locale == value ? Icon(Icons.done, color: color) : null,
        onTap: () {
          // 更新locale后MaterialApp會重新build
          localeModel.locale = value;
        },
      );
    }


    return Scaffold(
      appBar: AppBar(
        title: Text(gm.language),
      ),
      body: ListView(
        children: <Widget>[
          _buildLanguageItem("中文簡體", "zh_CN"),
          _buildLanguageItem("English", "en_US"),
          _buildLanguageItem(gm.auto, null),
        ],
      ),
    );
  }
}

上面代碼邏輯很簡單，唯一需要注意的是我們在build(…)方法里面定義了_buildLanguageItem(…)方法，它和在LanguageRoute類中定義該方法的區(qū)別就在于：在build(…)內定義的方法可以共享build(...)方法上下文中的變量，本例中是共享了localeModel。當然，如果_buildLanguageItem(…)的實現復雜一些的話不建議這樣做，此時最好是將其作為LanguageRoute類的方法。該頁面運行效果如圖15-6、15-7所示：

切換語言后立即生效。

#15.8.2 主題選擇頁

一個完整的主題Theme包括很多選項，這些選項在ThemeData中定義。本實例為了簡單起見，我們只配置主題顏色。我們提供幾種默認預定義的主題色供用戶選擇，用戶點擊一種色塊后則更新主題。主題選擇頁的實現代碼如下：

class ThemeChangeRoute extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(GmLocalizations.of(context).theme),
      ),
      body: ListView( //顯示主題色塊
        children: Global.themes.map<Widget>((e) {
          return GestureDetector(
            child: Padding(
              padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 16),
              child: Container(
                color: e,
                height: 40,
              ),
            ),
            onTap: () {
              //主題更新后，MaterialApp會重新build
              Provider.of<ThemeModel>(context).theme = e;
            },
          );
        }).toList(),
      ),
    );
  }
}

運行效果如圖15-8所示：

點擊其它主題色塊后，APP 主題色立馬切換生效。