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

本實(shí)例 APP 中語言和主題都是可以設(shè)置的，而兩者都是通過ChangeNotifierProvider來實(shí)現(xiàn)的：我們?cè)?code>main函數(shù)中使用了Consumer2，依賴了ThemeModel和LocaleModel，因此，當(dāng)我們?cè)谡Z言和主題設(shè)置頁更該當(dāng)前的配置后，Consumer2的builder都會(huì)重新執(zhí)行，構(gòu)建一個(gè)新的MaterialApp，所以修改會(huì)立即生效。下面看一下語言和主題設(shè)置頁的實(shí)現(xiàn)。

#15.8.1 語言選擇頁

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

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);
    //構(gòu)建語言選擇項(xiàng)
    Widget _buildLanguageItem(String lan, value) {
      return ListTile(
        title: Text(
          lan,
          // 對(duì)APP當(dāng)前語言進(jìn)行高亮顯示
          style: TextStyle(color: localeModel.locale == value ? color : null),
        ),
        trailing:
            localeModel.locale == value ? Icon(Icons.done, color: color) : null,
        onTap: () {
          // 更新locale后MaterialApp會(huì)重新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),
        ],
      ),
    );
  }
}

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

切換語言后立即生效。

#15.8.2 主題選擇頁

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

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會(huì)重新build
              Provider.of<ThemeModel>(context).theme = e;
            },
          );
        }).toList(),
      ),
    );
  }
}

運(yùn)行效果如圖15-8所示：

點(diǎn)擊其它主題色塊后，APP 主題色立馬切換生效。