如何在Flutter中使用主题

来自菜鸟教程
跳转至：导航、​搜索

介绍

Flutter 由 Material 和 Cupertino 设计系统等用户界面 (UI) 包支持。 这些设计系统旨在为整个应用程序提供一致且具有凝聚力的美学解决方案。

但是，从品牌的角度来看，仅依赖默认设计模式可能无法与您的需求紧密结合。 相反，您可能希望使用默认值作为基础，您可以在此基础上应用自定义。

在本文中，您将探索一些使用 Flutter 主题更改应用程序整体外观的方法。

先决条件

要阅读本文，您将需要：

  • 下载并安装 Flutter。
  • 下载并安装Android Studio 或 Visual Studio Code。
  • 建议为您的代码编辑器安装插件： 为 Android Studio 安装了 Flutter 和 Dart 插件。 为 Visual Studio Code 安装了 Flutter 扩展。

本文已使用 Flutter v1.22.2、Android SDK v30.0.2 和 Android Studio v4.1 进行了验证。

第 1 步 — 设置项目

就本文而言，您将依赖创建新 Flutter 应用程序时生成的演示应用程序。

为 Flutter 设置好环境后，您可以运行以下命令来创建新应用程序： 

flutter create flutter_themes_example

导航到新的项目目录： 

cd flutter_themes_example

使用 flutter create 将生成一个演示应用程序，该应用程序将显示按钮被单击的次数：

现在您已经有了一个使用 Material Design UI 组件的 Flutter 应用程序，您可以将第一个自定义应用到主题。

第 2 步 — 使用默认主题

Google 的 Material 包带有两个内置主题 - 浅色版本（默认设置）和深色版本。

要在整个应用程序中设置样式，您需要将主题设置为 MaterialApp 小部件中 ThemeData 上的一个方法，在本例中为 light() 或 [X159X ] 选项。

在代码编辑器中打开 main.dart 并将 theme 修改为 ThemeData.dark()：

lib/main.dart 

// ...

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.dark(),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

// ...

编译你的代码并让它在模拟器中运行：

接下来，您可以尝试高级主题自定义。

第三步——使用全局主题

也可以将参数直接传递给 ThemeData。 官方文档列出了所有可用的属性，包括primaryColor、fontFamily和cursorColor。

ThemeData 上的一些属性也有对应的亮度，这些属性控制它们上面的小部件。 所以 accentColor 会改变按钮，但 accentColorBrightness 会改变按钮上的文字或图标。 您将需要使用 Brightness 上的 light 或 dark 属性来实现。

在代码编辑器中打开 main.dart 并修改 ThemeData 以使用自定义的 primaryColor、accentColor 和 accentColorBrightness：

lib/main.dart 

// ...

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primaryColor: Colors.purple[800],
        accentColor: Colors.amber,
        accentColorBrightness: Brightness.dark
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

// ...

编译你的代码并让它在模拟器中运行：

AppBar 以带有白色文本的紫色色调显示。 该按钮显示为琥珀色，上面带有深色符号。

接下来，您可以尝试扩展主题。

第 4 步——调整主题

也可以采用现有主题并仅覆盖某些属性。 要扩展主题，您可以使用 copyWith 方法来扩展它并传入您的自定义样式。

在代码编辑器中打开 main.dart 并修改 ThemeData 以扩展 dark 主题：

lib/main.dart 

// ...

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.dark().copyWith(
        primaryColor: Colors.purple[800],
        accentColor: Colors.amber,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

// ...

编译你的代码并让它在模拟器中运行：

应用程序的主要内容以浅色文本显示为深色。 不过，AppBar 不像早前的深色主题实验那样是黑色的。 AppBar 是紫色的。 该按钮不像早期的深色主题实验那样是绿松石色。 按钮为琥珀色。

接下来，您将了解如何将主题应用于小部件。

第 5 步 — 使用主题

之前的实验依赖于 Material 小部件。 这些小部件已被开发为使用 ThemeData。 如果要创建新的自定义小部件，则需要确保可以将主题属性传递给它。 您可以使用 Theme.of() 访问 ThemeData 上的所有属性。

这是一个修改现有按钮以使用与 ThemeData 不同的主题属性的示例：

lib/main.dart 

// ...

class _MyHomePageState extends State<MyHomePage> {
  // ...

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // ...

      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        backgroundColor: Theme.of(context).primaryColor,
        foregroundColor: Theme.of(context).primaryColorLight,
        child: Icon(Icons.add),
      ),
    );
  }
}

编译您的代码并让它在模拟器中运行。

您应该观察到带有浅色图标的深色按钮，而不是绿松石按钮。

结论

在本文中，您学习了如何在 Flutter 中使用、自定义和扩展主题。

主题是在整个应用程序中创建一致且有凝聚力的美感的强大工具。

更多信息请参考【X12X】官方文档【X38X】。

取自“https://cainiaojiaocheng.com/index.php?title=如何在Flutter中使用主题&oldid=26369”
Powered by MediaWiki