美文网首页
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