【自学Flutter】26 主题 Theme 的使用

26 主题 Theme 的使用

1.源代码

import 'package:flutter/material.dart';

void main () => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  Color changeColor = Colors.orange;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Theme(
        data: ThemeData(
            primarySwatch: changeColor,
            iconTheme: IconThemeData(color: changeColor)
        ),
        child: Scaffold(
          appBar: AppBar(title: Text("Theme的使用"),),
          body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Icon(Icons.favorite),
                    Icon(Icons.airport_shuttle),
                    Text("  颜色跟随主题")
                  ]
              ),
              Theme(
                data: Theme.of(context).copyWith(
                  iconTheme: Theme.of(context).iconTheme.copyWith(
                      color: Colors.green
                  ),
                ),
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(Icons.favorite),
                      Icon(Icons.airport_shuttle),
                      Text("  颜色固定绿色")
                    ]
                ),
              ),
            ],
          ),
          floatingActionButton: FloatingActionButton(
              onPressed: () => setState(() => changeColor = changeColor == Colors.orange ? Colors.red : Colors.orange),
              child: Icon(Icons.palette)
          ),
        ),
      ),
    );
  }
}

2.解释源代码

import 'package:flutter/material.dart';

void main () => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  //定义颜色，用于主题颜色更换
  Color changeColor = Colors.orange;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Theme(
        data: ThemeData(
            primarySwatch: changeColor,
            iconTheme: IconThemeData(color: changeColor)
        ),
        child: Scaffold(
          appBar: AppBar(title: Text("Theme的使用"),),
          body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              //跟随变换
              Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Icon(Icons.favorite),
                    Icon(Icons.airport_shuttle),
                    Text("  颜色跟随主题")
                  ]
              ),
              //固定颜色
              Theme(
                data: Theme.of(context).copyWith(
                  iconTheme: Theme.of(context).iconTheme.copyWith(
                      color: Colors.green
                  ),
                ),
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(Icons.favorite),
                      Icon(Icons.airport_shuttle),
                      Text("  颜色固定绿色")
                    ]
                ),
              ),
            ],
          ),
          floatingActionButton: FloatingActionButton(
              onPressed: () => setState(() => changeColor = changeColor == Colors.orange ? Colors.red : Colors.orange),
              child: Icon(Icons.palette)
          ),
        ),
      ),
    );
  }
}

3.效果图