dart – 根据当前查看的页面更改AppBar的颜色和文本

概述我有一个TabBarView,可以在我的应用程序中的页面之间导航.有没有办法根据当前查看的页面更改/覆盖主AppBar的文本和颜色,而不是分别为每个页面创建一个AppBar？ 这就是我的页面设置方式 我的路由在main函数中定义如下： routes: <String, WidgetBuilder>{ "/Home": (BuildContext context) => ne 我有一个TabbarVIEw,可以在我的应用程序中的页面之间导航.有没有办法根据当前查看的页面更改/覆盖主Appbar的文本和颜色,而不是分别为每个页面创建一个Appbar？

这就是我的页面设置方式

我的路由在main函数中定义如下：

routes: <String,WidgetBuilder>{            "/Home": (BuildContext context) => new first.Home(),"/Support": (BuildContext context) => new second.Support(),}

标签类

class Tabs extends StatefulWidget {          @overrIDe          Tabsstate createState() => new Tabsstate();        }    class Tabsstate extends State<Tabs> with SingleTickerProvIDerStateMixin {      TabController controller;      @overrIDe      voID initState() {        super.initState();        controller = new TabController(length: 5,vsync: this);      }      @overrIDe      voID dispose() {        controller.dispose();        super.dispose();      }      @overrIDe      Widget build(BuildContext context) {      return new Scaffold(        appbar: new Appbar(          centerTitle: true,Title: new Text('App'),backgroundcolor: colors.blue,bottom: new Tabbar(              controller: controller,tabs: <Tab>[                new Tab (icon: new Icon(Icons.home),text: 'Home',),new Tab (icon: new Icon(Icons.mail),text:'Support'),]),body: new TabbarVIEw(          controller: controller,children: <Widget>[            new first.Home(),new second.Support(),],);    }

解决方法 我修改了这段代码,以增加对文本和颜色变化的支持

https://flutter.io/catalog/samples/tabbed-app-bar/

我为代码的丑陋道歉.我所做的就是将所有类更改为有状态小部件,添加一个setstate图标选择器,更改小部件以便有一个onpressed回调

import 'package:Flutter/material.dart';  class MainApp extends StatefulWidget {    MainApp({Key key,this.Title}) : super(key: key);    // This Widget is the home page of your application. It is stateful,// meaning that it has a State object (defined below) that contains    // fIElds that affect how it looks.    // This class is the configuration for the state. It holds the    // values (in this case the Title) provIDed by the parent (in this    // case the App Widget) and used by the build method of the State.    // FIElds in a Widget subclass are always marked "final".    final String Title;    @overrIDe    TabbedAppbarSample createState() => new TabbedAppbarSample();  }  class TabbedAppbarSample extends State<MainApp> {    Choice _choice;    initState(){      super.initState();      _choice = choices[0];    }    voID _select(var c){      setState((){        _choice = c;      });    }    @overrIDe    Widget build(BuildContext context) {      return new MaterialApp(        home: new DefaultTabController(          length: choices.length,child: new Scaffold(            appbar: new Appbar(              //dynamically create appbar colors              backgroundcolor: new color(_choice.color),Title: new Text(_choice.Title),bottom: new Tabbar(                isScrollable: true,tabs: choices.map((Choice choice) {                   //change to iconbutton                  return new Iconbutton(                    icon: new Icon(choice.icon),onpressed: (){_select(choice);},);                }).toList(),body:            new TabbarVIEw(              children: choices.map((Choice choice) {                return new padding(                  padding: const EdgeInsets.all(16.0),child: new ChoiceCard(choice: choice),);              }).toList(),);    }  }  class Choice {    const Choice({ this.Title,this.icon,this.color});    final String Title;    final IconData icon;    final num color;  }  const List<Choice> choices = const <Choice>[    const Choice(Title: 'CAR',icon: Icons.directions_car,color:  0xFFE0F7FA),const Choice(Title: 'BICYCLE',icon: Icons.directions_bike,color: 0x00ff0000),const Choice(Title: 'BOAT',icon: Icons.directions_boat,color: 0xFF42A5F5),const Choice(Title: 'BUS',icon: Icons.directions_bus,color: 0x0),const Choice(Title: 'TRAIN',icon: Icons.directions_railway,color: 0xFFEFFFFF),const Choice(Title: 'WALK',icon: Icons.directions_walk,color: 0x0000ff00),];  class ChoiceCard extends StatefulWidget {    ChoiceCard({Key key,this.choice}) : super(key: key);    final Choice choice;    @overrIDe    _ChoiceCard createState() => new _ChoiceCard();  }  class _ChoiceCard extends State<ChoiceCard> {    @overrIDe    Widget build(BuildContext context) {      final TextStyle textStyle = theme.of(context).texttheme.display1;      return new Card(        color: colors.white,child: new Center(          child: new Column(            mainAxisSize: MainAxisSize.min,crossAxisAlignment: CrossAxisAlignment.center,children: <Widget>[              new Icon(Widget.choice.icon,size: 128.0,color: textStyle.color),new Text(Widget.choice.Title,style: textStyle),);    }  }  voID main() {    runApp(new MainApp());  }

我有点恼火,因为我上面的代码类似于 *** 作所需的实际答案.我上面的代码和 *** 作系统想要的唯一区别是我将更改添加到tabcontroller而不是按钮本身

这是代码

import 'package:Flutter/material.dart'; voID main() {   runApp(new MyApp()); } class MyApp extends StatelessWidget{   Widget build(BuildContext context) {     return new MaterialApp(       Title: 'nothing',theme: new themeData(         primarySwatch: colors.blue,home: new Tabs(),);   } } class Tabs extends StatefulWidget {   @overrIDe   Tabsstate createState() => new Tabsstate(); } class Tabsstate extends State<Tabs> with SingleTickerProvIDerStateMixin {   TabController controller;   //create internal state   Choice _choice;   @overrIDe   voID initState() {     super.initState();     //try to make the length to     controller = new TabController(length: 5,vsync: this);     //add Listener to add change index callback     //https://docs.Flutter.io/Flutter/material/TabController-class.HTML     controller.addListener(_select);     _choice = choices[0];   }   @overrIDe   voID dispose() {     controller.dispose();     super.dispose();   }   voID _select(){     setState((){       _choice = choices[controller.index];     });   }   @overrIDe   Widget build(BuildContext context) {     return new Scaffold(         appbar: new Appbar(           centerTitle: true,backgroundcolor: new color(_choice.color),bottom: new Tabbar(               controller: controller,tabs: <Tab>[                 new Tab( icon: new Icon(choices[0].icon),new Tab (icon: new Icon(choices[1].icon),body: new TabbarVIEw(           controller: controller,children: <Widget>[             //dummy page             new MyHomePage(),new  Center( child: new Text('dummy page 2')),);   } } class Choice {   const Choice({ this.Title,this.color});   final String Title;   final IconData icon;   final num color; } //create a List const List<Choice> choices = const <Choice>[   const Choice(Title: 'Home',icon: Icons.home,color:  0x0),const Choice(Title: 'Support',icon: Icons.mail,]; class MyHomePage extends StatefulWidget {   @overrIDe   _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> {   @overrIDe   Widget build(BuildContext context) {     return new Center(       child: new Text('dummy page'),);   } }

总结

以上是内存溢出为你收集整理的dart – 根据当前查看的页面更改AppBar的颜色和文本全部内容，希望文章能够帮你解决dart – 根据当前查看的页面更改AppBar的颜色和文本所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。