android - Flutter 更改所选选项卡的背景

Question

我是 Flutter 的新手，我在屏幕底部创建了一个新的导航栏。我想在单击时更改我所在的选项卡的背景。我该如何改变它？我无法让它工作。我只是用“activeIcon”改变标签颜色或图标颜色。 @override 有什么作用？

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'Neu.dart';
import 'Beliebt.dart';
import 'Profil.dart';

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

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  int _selectedTab = 0;
  final _pageOptions = [
    NeuPage(),
    BeliebtPage(),
    ProfilPage(),
  ];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          primaryColor: Colors.deepOrangeAccent,
          primaryTextTheme: TextTheme(
            title: TextStyle(color: Colors.white),
          )),
      home: Scaffold(
        appBar: AppBar(
          title: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                  Image.asset(
                 'assets/logo_straight.png',
                  fit: BoxFit.contain,
                  height: 32,
              ),
            ],
          ),
        ),


        body: _pageOptions[_selectedTab],

        bottomNavigationBar: BottomNavigationBar(
          backgroundColor: Colors.deepOrangeAccent,
          currentIndex: _selectedTab,
          onTap: (int index) {
            setState(() {
              _selectedTab = index;
            });
          },
          items: [
            BottomNavigationBarItem(
              icon: Icon(FontAwesomeIcons.quoteRight, color: Colors.white),
              title: Text('Neu', style: TextStyle(color: Colors.white),
              )
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.whatshot, color: Colors.white),
              title: Text('Beliebt', style: TextStyle(color: Colors.white),
              )
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.account_circle, color: Colors.white),
              title: Text('Profil', style: TextStyle(color: Colors.white),
              )
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

您将需要构建自己的自定义小部件。 这就是 Flutter 的用途。您可以根据需要构建所有内容。 您将通过锻炼来流利地执行此操作。我制作了一个 MVE 供您查看。还有很多地方需要做得更好更流畅，但我认为对于初学者来说，看到详细的实现是件好事。

import 'package:flutter/material.dart';


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

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  int _selectedTab = 0;
  final _pageOptions = [
    Container(child: Center(child: Text('1', style: TextStyle(color: Colors.black87),)),),
    Container(child: Center(child: Text('2', style: TextStyle(color: Colors.black87),)),),
    Container(child: Center(child: Text('3 ', style: TextStyle(color: Colors.black87),)),),
  ];


  _changePage(int index) {
    setState(() {
      if (index >= _pageOptions.length){
        return;
      }
      _selectedTab = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          primaryColor: Colors.deepOrangeAccent,
          primaryTextTheme: TextTheme(
            title: TextStyle(color: Colors.white),
          )),
      home: Scaffold(
        appBar: AppBar(
          title: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset(
                'assets/logo_straight.png',
                fit: BoxFit.contain,
                height: 32,
              ),
            ],
          ),
        ),


        body: Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                Expanded(
                  child: _pageOptions[_selectedTab],
                ),
                Center(
                  child: Container(
                    color: Colors.orangeAccent,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: <Widget>[
                        BottomNavItem(
                          iconData: Icons.add,
                          title: 'Add',
                          selected: _selectedTab == 0,
                          onTap: (){
                            _changePage(0);
                          },
                        ),
                        BottomNavItem(
                          iconData: Icons.add,
                          title: 'Add',
                          selected: _selectedTab == 1,
                          onTap: (){
                            _changePage(1);
                          },
                        ),
                        BottomNavItem(
                          iconData: Icons.add,
                          title: 'Add',
                          selected: _selectedTab == 2,
                          onTap: (){
                            _changePage(2);
                          },
                        )
                      ],
                    ),
                  ),
                )
              ],
          ),
        )
      ),
    );
  }
}

class BottomNavItem extends StatelessWidget {

  final IconData iconData;
  final String title;
  final bool selected;
  final Function onTap;

  BottomNavItem({this.iconData, this.title, this.selected, this.onTap});

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Container(
        child: InkWell(
          child: Container(
            padding: EdgeInsets.all(8.0),
            color: selected ? Colors.orange : Colors.orangeAccent,
            child: Column(
              children: <Widget>[
                Icon(iconData),
                Text(title)
              ],
            ),
          ),
          onTap: onTap,
        ),
      ),
    );
  }
}