zoukankan      html  css  js  c++  java
  • flutter 主题ThemeData

    单个路由换肤(ThemeData),掌握局部覆盖全局

    代码相关解释:
    1.可以通过局部主题覆盖全局主题。上述代码中的通过Theme组件为第二行图标指定固定颜色(橘黄色)一样。Flutter会经常使用这种方法来自定义子树主题。

    2.Flutter是怎么让局部主题覆盖全局主题的?

    答:主要是因为Widget中使用主题样式是通过Theme.of(BuildContext context)来获取的。

    import 'package:flutter/material.dart';
    
    void main() {
      runApp( MaterialApp(
        title: 'Flutter gesture',
    //    home: TutorialHome(),
        home: _home(),
      ));
    }
    
    class _home extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,//相对于整个应用换肤,可以修改MaterialApp的theme属性
          ),
          home: ThemeRouteDemo(),
        );
      }
    }
    
    class ThemeRouteDemo extends StatefulWidget {
      @override
      _ThemeRouteDemoState createState() => _ThemeRouteDemoState();
    }
    
    class _ThemeRouteDemoState extends State<ThemeRouteDemo> {
    
      Color _themeColor = Colors.green; //当前路由主题色 (改变主题色)
    
    
      @override
      Widget build(BuildContext context) {
        ThemeData themeData = Theme.of(context);
        return Theme(
          data: ThemeData(
            primarySwatch: _themeColor,//用于导航栏、FloatingActionButton的背景色等
            iconTheme: IconThemeData(color: _themeColor),//用于Icon颜色
          ),
          child: Scaffold(
            appBar: AppBar(
              title: Text('ThemeData实现路由换肤'),
            ),
            body: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                //第一行Icon使用主题中的iconTheme
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Icon(Icons.favorite),
                    Icon(Icons.pregnant_woman),
                    Text(' 颜色跟随主题'),
                  ],
                ),
    
                //给第二行Icon自定义颜色(固定为某个颜色)
                Theme(
                  data: themeData.copyWith(
                    iconTheme: themeData.iconTheme.copyWith(
                      color: Colors.orange,
                    ),
                  ),
                  child:Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(Icons.send),
                      Icon(Icons.explore),
                      Text(' 颜色固定橘黄色'),
                    ],
                  ),
                ),
              ],
            ),
            floatingActionButton: FloatingActionButton(
              onPressed: () =>
                  setState(() =>
                  _themeColor = _themeColor==Colors.green ? Colors.orange : Colors.green,
                  ),
              child: Icon(Icons.palette),
            ),
          ),
        );
      }
    }

    跑起来少年!!!

    相对于整个应用换肤,可以修改MaterialApp的theme属性。

  • 相关阅读:
    react-路由简单封装
    promise 和 async / await
    数据结构 栈 、 队列 、 链表
    ES6 Symbol
    react-react常用包与对应使用
    node-egg的使用
    自我理解与概述-BFC(Block formatting context)
    Git
    MySQL优化技巧
    Shiro
  • 原文地址:https://www.cnblogs.com/gaozhang12345/p/11991263.html
Copyright © 2011-2022 走看看