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

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'),);
   }
 }