美文网首页
flutter 主题继承ThemeData注意事项

flutter 主题继承ThemeData注意事项

作者: 小话001 | 来源:发表于2021-05-08 15:09 被阅读0次

    主页面设置了ThemeData后,如果子组件想继承它,但是又想有自己的主题特点,需使用copyWith

    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    void main() => runApp(MyApp());
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          // 全局主题
          theme: ThemeData(
            // 1.亮度
            brightness: Brightness.light,
            // 2.primarySwatch传入不是Color, 而是MaterialColor(包含了primaryColor和accentColor)
            primarySwatch: Colors.red,
            // 3.primaryColor: 单独设置导航和TabBar的颜色
            primaryColor: Colors.orange,
            // 4.accentColor: 单独设置FloatingActionButton\Switch
            accentColor: Colors.green,
            // 5.Button的主题
            buttonTheme: ButtonThemeData(
              height: 25,
              minWidth: 10,
              buttonColor: Colors.yellow
            ),
            // 6.Card的主题
            cardTheme: CardTheme(
              color: Colors.greenAccent,
              elevation: 10
            ),
            // 7.Text的主题
            textTheme: TextTheme(
              body1: TextStyle(fontSize: 16, color: Colors.red),
              body2: TextStyle(fontSize: 20),
              display1: TextStyle(fontSize: 14),
              display2: TextStyle(fontSize: 16),
              display3: TextStyle(fontSize: 18),
              display4: TextStyle(fontSize: 20),
            )
          ),
          home: MYHomePage(),
        );
      }
    }
    class MYHomePage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("首页")
          ),
          body: Center(
            child: Column(
              children: <Widget>[
                Text("Hello World"),
                Text("Hello World", style: TextStyle(fontSize: 14),),
                Text("Hello World", style: Theme.of(context).textTheme.body2,),
                Text("Hello World", style: Theme.of(context).textTheme.display3,),
              ],
            ),
          ),
          bottomNavigationBar: BottomNavigationBar(
            items: [
              BottomNavigationBarItem(
                title: Text("首页"),
                icon: Icon(Icons.home)
              ),
              BottomNavigationBarItem(
                  title: Text("分类"),
                  icon: Icon(Icons.category)
              )
            ],
          ),
          floatingActionButton: FloatingActionButton(
            child: Icon(Icons.add),
            onPressed: () {
              Navigator.of(context).push(MaterialPageRoute(
                builder: (ctx) {
                  return MYDetailPage();
                }
              ));
            },
          ),
        );
      }
    }
    class MYDetailPage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
       // 当前页面想有自己的主题特点:第一:需要用Theme包裹,第二:使用copyWith,不然无法继承前面的brightness 、primarySwatch、buttonTheme、textTheme等等
        return Theme(
          data: Theme.of(context).copyWith(
            primaryColor: Colors.purple
          ),
          child: Scaffold(
            appBar: AppBar(
              title: Text("详情页"),
              backgroundColor: Colors.purple,
            ),
            body: Center(
              child: Text("detail pgae"),
            ),
            floatingActionButton: Theme(
               // 想要改变这个的主题,这里是特殊情况,
              data: Theme.of(context).copyWith(
                colorScheme: Theme.of(context).colorScheme.copyWith(
                  secondary: Colors.pink
                )
              ),
              child: FloatingActionButton(
                child: Icon(Icons.pets),
                onPressed: () {
                },
              ),
            ),
          ),
        );
      }
    }
    
    
    

    相关文章

      网友评论

          本文标题:flutter 主题继承ThemeData注意事项

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