Flutter怎么實現(xiàn)自定義themes

這篇“Flutter怎么實現(xiàn)自定義themes”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Flutter怎么實現(xiàn)自定義themes”文章吧。

MaterialApp中的themes

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

  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)在手機有一個暗黑模式，ThemeMode的這三種模式就是為了適應暗黑模式而生的。

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

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

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

ThemeData中還有專門為color變化定義的ColorScheme，還有為Text變化設置的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ù)應該如何處理呢？

我們可以使用Theme.of方法從當前的Theme中拷貝一份，然后再調用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來進行包裝。

比如之前的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。

以上就是關于“Flutter怎么實現(xiàn)自定義themes”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業(yè)資訊頻道。