无涯教程网

关注我们

Flutter - Themes

Flutter - Themes

Theme主题是预设的软件包，其中包含无涯教程网站或移动应用程序屏幕上的图形外观。

Flutter中的Material Widget也可以使用无涯教程的主题为AppBar，Button，Button，Checkboxes等设置字体样式和背景颜色。

Flutter在创建应用程序时使用默认主题。如果要与整个应用程序共享自定义主题，则需要在MateialApp()小部件下使用ThemeData。

有时，无涯教程希望在应用程序的一部分中覆盖整个应用程序的主题。在这种情况下，无涯教程需要将应用程序的部分包装在主题窗口小部件中。 Flutter为无涯教程提供了两种方法:

通过创建唯一ThemeData
通过扩展父主题

创建主题

当无涯教程不想继承任何应用程序颜色或字体样式时，使用第一种方法。在这种情况下，无涯教程将创建一个ThemeData()实例，并将其传递给Theme小部件，如下面的代码片段所示:

Theme(
  data: ThemeData(
    accentColor: Colors.blue,
  ),
  child: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.person),
  ),
);

扩展主题

如果您不想覆盖任何内容，请使用扩展父主题的第二种方法。可以使用copyWith()方法来处理。请参见以下代码段:

无涯教程网

Theme(
  data: Theme.of(context).copyWith(accentColor: Colors.blue),
  child: FloatingActionButton(
    onPressed: null,
    child: Icon(Icons.person),
  ),
);

使用主题

定义主题后，无涯教程可以将其与Theme.of(context)方法一起用于小部件build()方法中。如果在窗口小部件上方未定义，则将返回该应用程序的主题。

链接：https://www.learnfk.comhttps://www.learnfk.com/flutter/flutter-themes.html

来源：LearnFk无涯教程网

在下面的代码片段中，FloatingActionButton使用此技术返回accentColor。

Container(
  color: Theme.of(context).accentColor,
  child: Text(
    'Text with a background color',
    style: Theme.of(context).textTheme.headline,
  ),
);

让无涯教程了解如何在下面的示例中使用Flutter应用程序中的主题。

import 'package:flutter/material.dart';

void main() {runApp(MyApp());}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
       //定义默认亮度和颜色。
        brightness: Brightness.dark,
        primaryColor: Colors.lightBlue,
        accentColor: Colors.green,

       //定义默认字体系列。
        fontFamily: 'Monotype Coursiva',

       //定义默认字体系列。
       //标题、标题、正文等的文本样式。
        textTheme: TextTheme(
          headline: TextStyle(fontSize: 32.0, fontStyle: FontStyle.italic, fontFamily: 'Hind')
        ),
      ),
      home: MyThemePage(),
    );
  }
}

class MyThemePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Theme Example'),
      ),
      body: Center(
        child: Container(
          color: Theme.of(context).accentColor,
          child: Text(
            'Themes contains the graphical appearances that makes the user interface more attractive.',
            style: Theme.of(context).textTheme.headline,
          ),
        ),
      ),
      floatingActionButton: Theme(
        data: Theme.of(context).copyWith(
          colorScheme:
          Theme.of(context).colorScheme.copyWith(secondary: Colors.blue),
        ),
        child: FloatingActionButton(
          onPressed: null,
          child: Icon(Icons.person),
        ),
      ),
    );
  }
}

当无涯教程在设备或模拟器中运行应用程序时，无涯教程将看到类似于下面的屏幕截图的UI。

Flutter Themes

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

朱赟的技术管理课 -〔朱赟〕

Linux性能优化实战 -〔倪朋飞〕

SRE实战手册 -〔赵成〕

Web安全攻防实战 -〔王昊天〕

数据分析思维课 -〔郭炜〕

高并发系统实战课 -〔徐长龙〕

手把手带你写一个MiniSpring -〔郭屹〕

手把手带你搭建推荐系统 -〔黄鸿波〕

手把手带你写一个 MiniTomcat -〔郭屹〕

好记忆不如烂笔头。留下您的足迹吧 :)