簡介

一般情況下我們在flutter中搭建的app基本上都是用的是MaterialApp這種設(shè)計模式，MaterialApp中為我們接下來使用的按鈕，菜單等提供了統(tǒng)一的樣式，那么這種樣式能不能進(jìn)行修改或者自定義呢？

答案是肯定的，一起來看看吧。

MaterialApp中的themes

MaterialApp也是一種StatefulWidget,在MaterialApp中跟theme相關(guān)的屬性有這樣幾個：

  final ThemeData? theme;
  final ThemeData? darkTheme;
  final ThemeData? highContrastTheme;
  final ThemeData? highContrastDarkTheme;
  final ThemeMode? themeMode;

先來看下ThemeMode的定義：

enum ThemeMode {
  system,
  light,
  dark,
}

ThemeMode是一個枚舉類，里面有三個枚舉值，分別是system，light和dark。

我們都知道現(xiàn)在手機(jī)有一個暗黑模式，ThemeMode的這三種模式就是為了適應(yīng)暗黑模式而生的。

system表示是系統(tǒng)默認(rèn)的模式，light是明亮模式，dark是暗黑模式。

而ThemeData則定義了主題中各種組件或者行動的配色。

那么如果我們想要實現(xiàn)自定義themes的功能，就可以利用這個ThemeData類來重寫其中要重寫的顏色。

ThemeData中還有專門為color變化定義的ColorScheme，還有為Text變化設(shè)置的TextTheme，這兩個theme實際上是一系列的color集合。

除了ThemeData，flutter中還有一個類叫做Theme。

Theme是一個StatelessWidget，這個widget中包含了ThemeData，它提供了一個Theme.of方法來讓子widget獲得最近的ThemeData數(shù)據(jù)。

這就意味著，在flutter中，子widget可以使用和父widget不同的主題，非常的棒。

自定義themes的使用

那么如何使用自定義themes呢？有兩種方式。

第一種就是在使用MaterialApp的時候傳入自定義的themes，如下所示：

  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

但是這種操作實際是傳入了一個全新的ThemeData，假如我們只想修改部分ThemeData中的數(shù)據(jù)應(yīng)該如何處理呢？

我們可以使用Theme.of方法從當(dāng)前的Theme中拷貝一份，然后再調(diào)用copyWith方法，傳入要修改的自定義屬性即可。

如下所示：

  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: Theme.of(context).copyWith(useMaterial3: true),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

前面我們提到了Theme這個widget，我們還可以將要自定義Theme的widget用Theme包裹起來，理論上我們可以將任何widget都用Theme來進(jìn)行包裝。

比如之前的floatingActionButton的實現(xiàn)是直接返回一個FloatingActionButton：

floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        )

然后我們可以把FloatingActionButton用Theme包裝起來，如下所示：

floatingActionButton: Theme(
        data: Theme.of(context).copyWith(focusColor: Colors.yellow),
        child: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        ),
      )

這樣不同的組件就擁有了不同的theme。

總結(jié)

當(dāng)我們需要自定義theme或者不同theme的時候，就可以考慮使用本文中使用的方法來進(jìn)行theme的自定義了。

到此這篇關(guān)于Flutter學(xué)習(xí)之實現(xiàn)自定義themes詳解的文章就介紹到這了,更多相關(guān)Flutter自定義themes內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論