美文网首页
3、Flutter中ThemeData与AppBar

3、Flutter中ThemeData与AppBar

作者: LogMan | 来源:发表于2019-04-28 14:48 被阅读0次

    本次主要是记录Fultter Theme主题的设备与AppBar中的一些属性的使用及说明。目前项目开发有了四个界面。前期主题没太注意,今天看来要好好总结一下近期所学。
    首先,Android主题沉浸式设置,Flutter篇:

    import 'dart:io';
    import 'package:flutter/services.dart';
    void main(){
      runApp(MyApp());
      if (Platform.isAndroid) {
    // 以下两行 设置android状态栏为透明的沉浸。写在组件渲染之后,是为了在渲染后进行set赋值,覆盖状态栏,写在渲染之前MaterialApp组件会覆盖掉这个值。
        SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(
          statusBarColor: Colors.transparent,
        );
        SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
      }
    }
    

    根据字面意思就能看出来是对状态懒得设置,其中用到了 dart:ioflutter/services.dart这两个重点Mark一下,有时间深入探究一下用法跟能力。回归正题。

    ThemeData:

    主题数据,其中最常用的是primarySwatchprimaryColoraccentColor
    primarySwatch:UI右下角的FloatingActionButton的颜色就是默认取值MaterialColor,
    默认是蓝色的,如果修改成primarySwatch,就会变成这个颜色值。只支持MaterialColor。
    primaryColor:顶部导航栏和状态栏的颜色修改,需要用到这个属性,类型 Color。
    accentColor:前景色(文本、按钮、覆盖边缘效果等)。

    AppBar:

    看一下项目中的使用

    @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            elevation: 0.0,
            centerTitle: true,
            brightness: Brightness.dark,
            iconTheme: IconThemeData(
              color: Colors.white,
            ),
            title: Text(
              _messionItem.m_name,
              style: TextStyle(
                fontSize: 20.0,
                color: Colors.white,
              ),
            ),
          ),
    ...
    }
    

    其中brightness主题设置较为关键,它是设置状态栏图标与字体颜色的。
    brightness: Brightness.dark 状态栏图标与字体颜色为白色。
    brightness: Brightness.light 状态栏图标与字体颜色为黑色。
    iconTheme:设置appbar icon的颜色,appbar中icon的颜色会根据primaryColor的改变来确定自身的颜色,这里可以在iconTheme中指定icon的颜色。
    默认不做修改前:

    微信截图_20190428145634.png
    修改之后:
    微信截图_20190428145659.png

    相关文章

      网友评论

          本文标题:3、Flutter中ThemeData与AppBar

          本文链接:https://www.haomeiwen.com/subject/zvornqtx.html