Flutter 夜间模式及字体设置(2.2)

最新推荐文章于 2024-05-24 09:47:20 发布

s10g

最新推荐文章于 2024-05-24 09:47:20 发布

阅读量1.1k

点赞数 2

分类专栏： Flutter

本文链接：https://blog.csdn.net/weixin_44819566/article/details/109627337

版权

Flutter 专栏收录该内容

43 篇文章 10 订阅

订阅专栏

前言:这段时间都挺忙的,没来记得更新,我又要学又要更新,还要上班,每天也挺累的,希望大家看到这篇文章,觉得还行的话留下您的点赞吧~

夜间模式设置
字体设置

夜间模式设置

夜间模式的设置是通过主题当中的brightness属性来设置的

在这里插入图片描述

Brightness.dark 夜间模式
Brightness.light 白天模式

  bool _isLight = true;//判断是否是夜间模式 true白天 false夜间
 theme: new ThemeData(
          fontFamily: "MaoTi", //设置全局字体
          brightness:
              _isLight == true ? Brightness.light : Brightness.dark //判断 夜间/白天模式
          ),

然后在按钮中设置判断Ink(),InkResponse() 组件下一章会进行详细的介绍

 Padding(
                padding: EdgeInsets.only(top: 20),
                child: Ink(
                  decoration: BoxDecoration(
                    borderRadius: new BorderRadius.circular(25),
                    border: Border.all(color: Colors.black, width: 2),
                  ),
                  child: InkResponse(
                    borderRadius: BorderRadius.circular(25),
                    splashColor: Colors.tealAccent,
                    radius: 300,
                    //  ----√----
                    containedInkWell: true,
                    //  ----√----
                    highlightShape: BoxShape.rectangle,
                    //  ----√----
                    child: Container(
                      width: 200,
                      height: 50,
                      alignment: Alignment.center,
                      child: Text("切换主题"),
                    ),
                    onTap: () {
                      setState(() {
                      //这里进行判断赋值
                        _isLight == true ? _isLight = false : _isLight = true;
                      });
                    },
                  ),
                ),
              )

来看看效果吧，正好提前看看下一章Ink(),InkResponse() 的效果哈哈哈

在这里插入图片描述

字体设置

免费字体下载

点击右键下载即可;

在这里插入图片描述

创建fonts文件夹,存放字体库

在这里插入图片描述

在pubspec.yaml最下方中声明字体,注意格式!

  fonts:
    - family: MaoTi                # 字体别名
      fonts:
        - asset: fonts/maoti.ttf  # 字体文件目录
          weight: 700              # 权重 700表示粗体，相当于bold
    - family: iconfont                # 字体别名
      fonts:
          - asset: fonts/iconfont.ttf  # 字体文件目录
            weight: 700              # 权重 700表示粗体，相当于bold

然后点击Pub get编译字体

在这里插入图片描述

全局使用:

通过主题(theme)中fontFamily属性设置全局字体

  theme: new ThemeData(
          fontFamily: "MaoTi", //设置全局字体

          brightness:
              _isLight == true ? Brightness.light : Brightness.dark //判断 夜间/白天模式
          ),

在这里插入图片描述
这里字体的MaoTi就是引用的pubspec.yaml中声明的别名

在这里插入图片描述

个别使用:

Text(
         "我是测试Text的",
          style: TextStyle(fontFamily: "MaoTi"),
        ),
Text(
         "切换主题",
          //通过TextStyle中的fontFamily属性设置字体
          style: TextStyle(fontFamily: "iconfont"),
      ),