加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

dart – 如何为屏幕设置不同的主题?

发布时间:2020-12-14 14:51:44 所属栏目:百科 来源:网络整理
导读:我创建了 Friendly Chat app,并希望添加一个不同主题的新屏幕,但它不起作用:-( 整个应用程序有一个Brightness.dark主题: void main() = runApp(new MyApp());class MyApp extends StatelessWidget { // This widget is the root of your application. @over
我创建了 Friendly Chat app,并希望添加一个不同主题的新屏幕,但它不起作用:-(

整个应用程序有一个Brightness.dark主题:

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

class MyApp extends StatelessWidget {

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    print("build MaterialApp");
    return new MaterialApp(
      title: 'Friendly Chat',theme: kTheme,home: new ChatScreen(),routes: <String,WidgetBuilder>{
        SettingsScreen.PATH: (BuildContext context) => new SettingsScreen()
      },);
  }
}

final ThemeData kTheme = new ThemeData(
  primarySwatch: Colors.indigo,primaryColor: Colors.indigoAccent[100],primaryColorBrightness: Brightness.dark,);

当用户单击按钮时,我按下设置屏幕:

Map results = await Navigator.of(context).pushNamed(SettingsScreen.PATH);

在设置屏幕中,我更改了AppBar的backgroundColor和亮度但新的/不同的亮度没有效果(更改backgroundColor工作)

class SettingsScreen extends StatefulWidget {

  @override
  State createState() => new SettingsScreenState();
}

class SettingsScreenState extends State<SettingsScreen> {

  @override
  Widget build(BuildContext context) {
    return new WillPopScope(
      onWillPop: _onWillPop,child: new Scaffold(
        appBar: new AppBar(
          title: new Text("Settings"),backgroundColor: Colors.amberAccent[700],brightness: Brightness.light,),);
  }
}

如何将设置屏幕AppBar主题更改为轻量级主题?

编辑

最后我想要:

>所有屏幕都有一个黑色的AppBar背景色,带有白色标题和图标
>设置屏幕(仅限)具有浅色标题和图标的AppBar背景颜色

加分:如何为整个屏幕设置不同的主题,而不仅仅是AppBar

解决方法

您可以通过在 Theme小部件中包装所需的小部件来覆盖当前主题

通常你会有类似的东西:

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  final AppBar appBar;

  CustomAppBar(): appBar = new AppBar();

  @override
  Widget build(BuildContext context) {
    return new Theme(
      child: appBar,data: new ThemeData.dark()
    );
  }

  @override
  Size get preferredSize => appBar.preferredSize;
}

必须创建一个自定义类,因为Scaffold需要一个PreferredSizeWidget.

编辑

要回答你的“奖励点”,这很简单.

而不是将AppBar包装在主题中,而是包裹Scaffold.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读