Flutter入門 -- ThemeData

用于自定義應(yīng)用程序的主題顏色和排版等。

factory ThemeData({
  Brightness brightness, // 應(yīng)用整體主題的亮度。用于按鈕之類的小部件,以確定在不使用主色或強(qiáng)調(diào)色時(shí)選擇什么顏色。
  MaterialColor primarySwatch,// 定義一個(gè)單一的顏色以及十個(gè)色度的色塊。
  Color primaryColor, // 應(yīng)用程序主要部分的背景顏色(toolbars、tab bars 等)
  Brightness primaryColorBrightness, // primaryColor的亮度。用于確定文本的顏色和放置在主顏色之上的圖標(biāo)(例如工具欄文本)。
  Color primaryColorLight, // primaryColor的淺色版
  Color primaryColorDark, // primaryColor的深色版
  Color accentColor, // 小部件的前景色(旋鈕、文本、覆蓋邊緣效果等)。
  Brightness accentColorBrightness, // accentColor的亮度。
  Color canvasColor, //  MaterialType.canvas 的默認(rèn)顏色
  Color scaffoldBackgroundColor, // Scaffold的默認(rèn)顏色。典型Material應(yīng)用程序或應(yīng)用程序內(nèi)頁面的背景顏色。
  Color bottomAppBarColor, // BottomAppBar的默認(rèn)顏色
  Color cardColor, // Card的顏色
  Color dividerColor, // Divider和PopupMenuDivider的顏色,也用于ListTile之間、DataTable的行之間等。
  Color highlightColor, // 選中在潑墨動(dòng)畫期間使用的突出顯示顏色,或用于指示菜單中的項(xiàng)。
  Color splashColor,  // 墨水飛濺的顏色。InkWell
  InteractiveInkFeatureFactory splashFactory, // 定義由InkWell和InkResponse反應(yīng)產(chǎn)生的墨濺的外觀。
  Color selectedRowColor, // 用于突出顯示選定行的顏色。
  Color unselectedWidgetColor, // 用于處于非活動(dòng)(但已啟用)狀態(tài)的小部件的顏色。例如,未選中的復(fù)選框。通常與accentColor形成對(duì)比。也看到disabledColor。
  Color disabledColor, // 禁用狀態(tài)下部件的顏色,無論其當(dāng)前狀態(tài)如何。例如,一個(gè)禁用的復(fù)選框(可以選中或未選中)。
  Color buttonColor, // RaisedButton按鈕中使用的Material 的默認(rèn)填充顏色。
  ButtonThemeData buttonTheme, // 定義按鈕部件的默認(rèn)配置,如RaisedButton和FlatButton。
  Color secondaryHeaderColor, // 選定行時(shí)PaginatedDataTable標(biāo)題的顏色。
  Color textSelectionColor, // 文本框中文本選擇的顏色,如TextField
  Color cursorColor, // 文本框中光標(biāo)的顏色,如TextField
  Color textSelectionHandleColor,  // 用于調(diào)整當(dāng)前選定的文本部分的句柄的顏色。
  Color backgroundColor, // 與主色形成對(duì)比的顏色,例如用作進(jìn)度條的剩余部分。
  Color dialogBackgroundColor, // Dialog 元素的背景顏色
  Color indicatorColor, // 選項(xiàng)卡中選定的選項(xiàng)卡指示器的顏色。
  Color hintColor, // 用于提示文本或占位符文本的顏色,例如在TextField中。
  Color errorColor, // 用于輸入驗(yàn)證錯(cuò)誤的顏色,例如在TextField中
  Color toggleableActiveColor, // 用于突出顯示Switch、Radio和Checkbox等可切換小部件的活動(dòng)狀態(tài)的顏色。
  String fontFamily, // 文本字體
  TextTheme textTheme, // 文本的顏色與卡片和畫布的顏色形成對(duì)比。
  TextTheme primaryTextTheme, // 與primaryColor形成對(duì)比的文本主題
  TextTheme accentTextTheme, // 與accentColor形成對(duì)比的文本主題。
  InputDecorationTheme inputDecorationTheme, // 基于這個(gè)主題的 InputDecorator、TextField和TextFormField的默認(rèn)InputDecoration值。
  IconThemeData iconTheme, // 與卡片和畫布顏色形成對(duì)比的圖標(biāo)主題
  IconThemeData primaryIconTheme, // 與primaryColor形成對(duì)比的圖標(biāo)主題
  IconThemeData accentIconTheme, // 與accentColor形成對(duì)比的圖標(biāo)主題。
  SliderThemeData sliderTheme,  // 用于呈現(xiàn)Slider的顏色和形狀
  TabBarTheme tabBarTheme, // 用于自定義選項(xiàng)卡欄指示器的大小、形狀和顏色的主題。
  CardTheme cardTheme, // Card的顏色和樣式
  ChipThemeData chipTheme, // Chip的顏色和樣式
  TargetPlatform platform, 
  MaterialTapTargetSize materialTapTargetSize, // 配置某些Material部件的命中測(cè)試大小
  PageTransitionsTheme pageTransitionsTheme, 
  AppBarTheme appBarTheme, // 用于自定義Appbar的顏色、高度、亮度、iconTheme和textTheme的主題。
  BottomAppBarTheme bottomAppBarTheme, // 自定義BottomAppBar的形狀、高度和顏色的主題。
  ColorScheme colorScheme, // 擁有13種顏色,可用于配置大多數(shù)組件的顏色。
  DialogTheme dialogTheme, // 自定義Dialog的主題形狀
  Typography typography, // 用于配置TextTheme、primaryTextTheme和accentTextTheme的顏色和幾何TextTheme值。
  CupertinoThemeData cupertinoOverrideTheme 
})

在Flutter中有兩種方法來使用主題,一種是全局范圍的主題

new MaterialApp(
    title: title,
    theme: ThemeData(
         primaryColor: Colors.red,
         //...
    ),
);

一種是使用 Theme Widget 創(chuàng)建局部主題,用于為某個(gè)頁面單獨(dú)設(shè)置主題

new Theme(
    data: ThemeData(
        accentColor: Colors.yellow,
        //...
    ),
    child: Text('Hello World'),
);

當(dāng)然,如果你只是想改變部分主題樣式,可以使用 copyWith方法來繼承App的主題,只覆蓋部分樣式。

new Theme(
    data: Theme.of(context).copyWith(accentColor: Colors.yellow),
    child: Text('copyWith method'),
);

創(chuàng)建好主題后,要如何使用呢,在Widget的構(gòu)造方法里面通過Theme.of(context)方法來調(diào)用。
Theme.of(context) 會(huì)查找Widget 樹,并返回最近的一個(gè)Theme對(duì)象。如果父層級(jí)上有Theme對(duì)象,則返回這個(gè)Theme,如果沒有,就返回App的Theme。

new Container(
    color: Theme.of(context).accentColor,
    chile: Text(
        'Text with a background color',
        style: Theme.of(context).textTheme.title,
    ),
);
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容