Flutter主题风格

栏目: IT技术 · 发布时间: 4年前

内容简介:在Flutter开发中,我们可以通过定义全局Theme会影响整个app的颜色和字体样式。使用起来非常简单,只需要向MaterialApp构造器传入

在Flutter开发中,我们可以通过定义 Theme ,复用颜色和字体样式,从而让整个app的设计看起来更一致。

一. Theme主题的使用

Theme分为:全局Theme和局部Theme

主题有两个作用:

  • 设置了主题之后,某些Widget会自动使用主题的样式(比如AppBar的颜色)

  • 将某些样式放到主题中统一管理,在应用程序的其它地方直接引用

1.1. 全局Theme

全局Theme会影响整个app的颜色和字体样式。

使用起来非常简单,只需要向MaterialApp构造器传入 ThemeData 即可。

  • 如果没有设置Theme,Flutter将会使用预设的样式。

  • 当然,我们可以对它进行定制。

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 1.亮度: light-dark
        brightness: Brightness.light,
        // 2.primarySwatch: primaryColor/accentColor的结合体
        primarySwatch: Colors.red,
        // 3.主要颜色: 导航/底部TabBar
        primaryColor: Colors.pink,
        // 4.次要颜色: FloatingActionButton/按钮颜色
        accentColor: Colors.orange,
        // 5.卡片主题
        cardTheme: CardTheme(
          color: Colors.greenAccent,
          elevation: 10,
          shape: Border.all(width: 3, color: Colors.red),
          margin: EdgeInsets.all(10)
        ),
        // 6.按钮主题
        buttonTheme: ButtonThemeData(
          minWidth: 0,
          height: 25
        ),
        // 7.文本主题
        textTheme: TextTheme(
          title: TextStyle(fontSize: 30, color: Colors.blue),
          display1: TextStyle(fontSize: 10),
        )
      ),
      home: HYHomePage(),
    );
  }
}
Flutter主题风格
全局主题

1.2. 局部Theme

如果某个具体的Widget不希望直接使用全局的Theme,而希望自己来定义,应该如何做呢?

  • 非常简单,只需要在Widget的父节点包裹一下Theme即可

创建另外一个新的页面,页面中使用新的主题:

  • 在新的页面的Scaffold外,包裹了一个Theme,并且设置data为一个新的ThemeData

class HYSecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData(),
      child: Scaffold(
      ),
    );
  }
}
Flutter主题风格
新的主题

但是,我们很多时候并不是想完全使用一个新的主题,而且在之前的主题基础之上进行修改:

class HYSecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Theme(
      data: Theme.of(context).copyWith(
        primaryColor: Colors.greenAccent
      ),
      child: Scaffold(
      ),
    );
  }
}

1.3. Flutter中文网错误

但是这里有一个注意事项:accentColor在这里并不会被覆盖。

为什么不能覆盖呢?https://github.com/material-components/material-components-flutter-codelabs/issues/106

我摘抄一点官方人员的回复:

Flutter主题风格
image-20200325105126901

其实官网文档中之前也出现了类似的错误,比如Flutter中文网之前是翻译官方文档的

  • https://flutterchina.club/cookbook/design/themes/其中就有该错误

Flutter主题风格
image-20200325103731257

后来官网文档中对这个问题进行了修正:

Flutter主题风格
image-20200325103957271

二. 暗黑Theme适配

2.1. darkTheme

目前很多应用程序都需要适配暗黑模式,Flutter中如何做到暗黑模式的适配呢?

事实上,MaterialApp中有theme和dartTheme两个参数:

  • 按照下面的写法,我们已经默认适配了暗黑主题

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: HYHomePage(),
    );
  }
}
Flutter主题风格
主题适配

2.2. 开发中适配

在开发中,为了能适配两种主题(设置是更多的主题),我们可以封装一个AppTheme

  • 1.公共的样式抽取成常量

  • 2.封装一个亮色主题

  • 3.封装一个暗黑主题

import 'package:flutter/material.dart';

class AppTheme {
  // 1.抽取相同的样式
  static const double _titleFontSize = 20;
  
  // 2.亮色主题
  static final ThemeData lightTheme = ThemeData(
    primarySwatch: Colors.pink,
    primaryTextTheme: TextTheme(
      title: TextStyle(
        color: Colors.yellow,
        fontSize: _titleFontSize
      )
    ),
    textTheme: TextTheme(
      body1: TextStyle(color: Colors.red)
    )
  );
  
  // 3.暗黑主题
  static final ThemeData darkTheme = ThemeData(
    primaryColor: Colors.grey,
    primaryTextTheme: TextTheme(
      title: TextStyle(
        color: Colors.white,
        fontSize: _titleFontSize
      )
    ),
    textTheme: TextTheme(
      title: TextStyle(color: Colors.white),
      body1: TextStyle(color: Colors.white70)
    )
  );
}

在MaterialApp中,可以决定使用哪一个主题:

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: AppTheme.lightTheme,
      darkTheme: AppTheme.darkTheme,
      home: HYHomePage(),
    );
  }
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

群体智能

群体智能

James Kennedy、Russell C Eberhart、Yuhui Shi / 人民邮电出版社 / 2009-2-1 / 75.00元

群体智能是近年来发展迅速的人工智能学科领域.通过研究分散,自组织的动物群体和人类社会的智能行为, 学者们提出了许多迥异于传统思路的智能算法, 很好地解决了不少原来非常棘手的复杂工程问题.与蚁群算法齐名的粒子群优化(particle swarm optimization, 简称PSO)算法就是其中最受瞩目,应用最为广泛的成果之一. 本书由粒子群优化算法之父撰写,是该领域毋庸置疑的经典著作.作者......一起来看看 《群体智能》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

MD5 加密
MD5 加密

MD5 加密工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具