close

ThemeData 使用和 Custom Styles in 设置 UI 格式 Flutter

在其中，您可以使用 并自定义 Flutter 应用程序的外观和风格 。 是一个类，其中包含定义整个应用程序的 主色 、字体等属性。 自定义样式允许您针对每个特定的 进行自定义 。 以下是有关如何使用 和自定义 的详细说明 ： ThemeData styles ThemeData styles padding styles Widget ThemeData Styles Flutter

ThemeData

在 中 Flutter，是一个类，其中包含用于定义 整个应用程序的 ThemeData 主颜色、字体系列和许多其他样式选项的属性。 padding 通过使用 ThemeData，您可以快速更改应用程序的整体外观，而无需单独修改 Widget。

的共同属性 ThemeData：

  • primaryColor ：应用程序主要元素的主要颜色，例如应用程序栏、按钮等。
  • accentColor ：UI 中次要元素或突出显示的强调色，例如 FloatingActionButton。
  • backgroundColor ：整个应用程序的背景颜色。
  • textTheme ：定义应用程序中不同文本元素的主要文本 styles，例如标题、正文等。
  • textTheme.headline1 ：标题级别 1 的文本样式。
  • textTheme.headline2 ：2 级标题的文本样式。
  • textTheme.bodyText1 ：主体文本的文本样式。 
MaterialApp(  
  theme: ThemeData(  
    primaryColor: Colors.blue, // Dominant colors for title bars, buttons, etc.  
    accentColor: Colors.green, // Primary color for secondary elements eg FloatingActionButton  
    fontFamily: 'Roboto', // The main font for the whole application  
    textTheme: TextTheme( // Dominant text styles for in-app texts  
      headline1: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),  
      headline2: TextStyle(fontSize: 30, fontWeight: FontWeight.w500),  
      bodyText1: TextStyle(fontSize: 16),  
   ),  
 ),  
  home: MyHomePage(),  
)

 

定制风格

自定义 Styles 允许您自定义每个特定的样式 Widget。 通过使用 style Text、Container、RaishedButton 等 Widget 的属性，您可以更改字体、颜色、文本大小、 padding 以及各种其他属性。

TextStyle的常用属性（用于Text Widget）：

  • fontSize ：字体大小。
  • fontWeight ：字体粗细。
  • color ：文字颜色。
  • fontStyle ：字体样式，如粗体、斜体。
  • letterSpacing ：字符之间的间距。
  • wordSpacing ：单词之间的间距。
  • decoration ：文字修饰，如下划线、删除线等。

使用自定义的示例 Styles： 

Text(  
  'Chào bạn',  
  style: TextStyle(fontSize: 24, color: Colors.red, fontWeight: FontWeight.bold),  
)  
  
Container(  
  width: 100,  
  height: 100,  
  color: Colors.blue,  
  padding: EdgeInsets.all(8),  
  child: Text('Container', style: TextStyle(fontSize: 18, color: Colors.white)),  
)

 

使用 Themes 和 Styles 与 MediaQuery

您可以结合使用 Themes 和 Styles 来 MediaQuery 根据屏幕尺寸或设备分辨率调整 UI。

例子： 

MediaQuery(  
  data: MediaQuery.of(context).copyWith(textScaleFactor: 1.5),  
  child: Text('The text will be scaled 1.5 times larger than the default size'),  
)

 

结论：

Flutter 提供强大的工具来格式化应用程序的 UI。 通过使用 ThemeData 和自定义 Styles，您可以轻松调整 UI 元素，例如颜色、字体、文本大小等，为您的应用程序创建美观且引人入胜的界面。