颤动更改所选选项卡的背景

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

Answer 2

将您的项目数组更改为如下所示：

  items:  [
BottomNavigationBarItem(
    icon: Icon(FontAwesomeIcons.quoteRight, color: Colors.white),
    title: Text(
      'Neu',
      style:
          TextStyle(color: _selectedTab == 0 ? Colors.red : Colors.white),
    )),
BottomNavigationBarItem(
    icon: Icon(Icons.whatshot, color: Colors.white),
    title: Text(
      'Beliebt',
      style:
          TextStyle(color: _selectedTab == 0 ? Colors.red : Colors.white),
    )),
BottomNavigationBarItem(
    icon: Icon(Icons.account_circle, color: Colors.white),
    title: Text(
      'Profil',
      style:
          TextStyle(color: _selectedTab == 0 ? Colors.red : Colors.white),
    )),],

Answer 3

我为你制作了这个解决方案，因为它是 Flutter 的新手，但你应该考虑在未来构建自己的小部件 在这里，例如，我将您的项目包装在一个容器中，并且 GestureDetector 容器获得与您的项目相同的大小和默认背景颜色，并且在每次单击时您更改容器颜色并重置其他项目颜色，这些是您在上面声明的变量

GestureDetector(onTap => {firstItemColor = newColor , seconditem = oldColor } ,child: Container(Color: firstItemColor ,height: itemHeight , width: itemWidth,
    child:BottomNavigationBarItem(
        icon: Icon(Icons.whatshot, color: Colors.white),
        title: Text(
          'Beliebt',
          style:
              TextStyle(color: _selectedTab == 0 ? Colors.red : Colors.white),
        )))),