Flutter Theme Widget

Flutter 的 Theme Widget 可以用于在整个应用程序中统一定义一组 Widget 的样式、颜色等属性。Theme Widget 可以定义全局的主题,并且可以在子 Widget 中覆盖全局主题中的某些属性,从而实现局部主题的定制。

示例代码:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        accentColor: Colors.red,
        fontFamily: 'Roboto',
        textTheme: TextTheme(
          headline1: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
          bodyText1: TextStyle(fontSize: 16.0, color: Colors.black),
          button: TextStyle(fontSize: 16.0, color: Colors.white),
        ),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Hello, Flutter!',
              style: Theme.of(context).textTheme.headline1,
            ),
            RaisedButton(
              child: Text('Click me!'),
              onPressed: () {},
              color: Theme.of(context).accentColor,
              textColor: Theme.of(context).textTheme.button.color,
            ),
          ],
        ),
      ),
    );
  }
}

上述代码展示了如何使用 Theme Widget 定义全局主题,并在子 Widget 中使用全局主题中定义的样式、颜色等属性。其中,ThemeData 可以定义一组主题属性,包括 primarySwatch、accentColor、fontFamily、textTheme 等。在子 Widget 中,可以使用 Theme.of(context) 获取全局主题,并使用 ThemeData 中定义的属性来设置子 Widget 的样式、颜色等属性。

使用 Theme Widget 可以实现整个应用程序中一致的样式和颜色,同时还可以在需要的时候进行局部定制,从而更好地控制应用程序的视觉效果。

powered by Gitbook© 2023 编外计划 | 最后修改: 2023-11-24 03:36:59

results matching ""

    No results matching ""