选择了哪个选项卡的导航栏指示器不起作用

Question

这是我对这个主题的第二个线程，这次我将添加一张图片和完整的代码。 导航栏正在工作，但我想要一个被按下的指示器（图标下的文本已经放大了一点，但这还不够） 我希望按下的部分的背景比其他部分更亮。 这怎么可能？我对 Flutter 真的很陌生，目前这是唯一让我完全困惑的编程语言。 screenshot 在代码中，我只包含了一个图标字体（字体真棒）和导航栏指向的 3 个页面。 （neu，beliebt，profil）

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(
          currentIndex: _selectedTab,
          backgroundColor: Colors.deepOrangeAccent,
          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 是一个开源项目，编辑原始 Widget 并提交或自己使用

  • here original Widget code

• 在小部件上绘画

  • 使用 Container 、 Stack 和 bottomNavigationBar 大小来移动 Container

  • 这是我在这里使用的

屏幕录像

步骤 1

在MyAppState里面添加GlobalKey变量

GlobalKey _bottomNavigationBarKey = GlobalKey();

第二步

将 GlobalKey 分配给 BottomNavigationBar

BottomNavigationBar(
   key: _bottomNavigationBarKey,
...)

第三步

在 MyAppState 内添加 _bottomNavigationBarSize 变量

  Size _bottomNavigationBarSize = Size(0, 0);

第四步

在MyAppState里面添加_getbottomNavigationBarSize方法来询问框架的bottomNavigationBar Size

 _getbottomNavigationBarSize() {
    final RenderBox bottomNavigationBarRenderBox =
        _bottomNavigationBarKey.currentContext.findRenderObject();
    final bottomNavigationBarSize = bottomNavigationBarRenderBox.size;
    setState(() {
      _bottomNavigationBarSize = bottomNavigationBarSize;
    });
  }

第 5 步

在 addPostFrameCallback 的 initState 内调用 _getbottomNavigationBarSize 方法告诉框架绘制完成后计算尺寸

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance
        .addPostFrameCallback((_) => _getbottomNavigationBarSize());
  }

第 6 步

将 bottomNavigationBar 小部件变形到 Stack 小部件

bottomNavigationBar: 
 Stack
 (
  children: <Widget>
    [
    BottomNavigationBar(.....),
   ],
 )

第 7 步

在BottomNavigationBar之后添加一个Positioned Widget

bottomNavigationBar: 
 Stack
 (
  children: <Widget>
    [
    BottomNavigationBar(.....),
    Positioned(.....),
   ],
 )

第 8 步

设置Positioned小部件left属性

• 项目宽度 = *bottomNavigationBar 宽度除以 页数

• 第一项偏移 = 0 * 项宽度 = 0

• 第二个项目结束 = 1 * 项目宽度 = 项目宽度

• 第 2 项结束 = 2 * 项宽度 = 2 项宽度

• 容器偏移 = 项目宽度乘以 _selectedTab 索引

Positioned(
  left: (_bottomNavigationBarSize.width / _pageOptions.length) * _selectedTab,
),

第 9 步

在BottomNavigationBar之后添加一个Positioned Widget

Positioned
(
  ...,
  child: Container(.... ),
)

第 10 步

在Container中设置height属性为bottomNavigationBar高度

   Container(
      height: _bottomNavigationBarSize.height,
      ....),

第 10 步

在 Container 中将 width 属性设置为 bottomNavigationBar 宽度除以页数

   child: Container(
      width: _bottomNavigationBarSize.width / _pageOptions.length,
      ....),

第 11 步

在 Container 中将 color 属性设置为黑色，不透明度为 26%。

   child: Container(
      ....,
      color: Colors.black26)

完整代码

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> {
  GlobalKey _bottomNavigationBarKey = GlobalKey();

  Size _bottomNavigationBarSize = Size(0, 0);
  _getbottomNavigationBarSize() {
    final RenderBox bottomNavigationBarRenderBox =
        _bottomNavigationBarKey.currentContext.findRenderObject();
    final bottomNavigationBarSize = bottomNavigationBarRenderBox.size;
    setState(() {
      _bottomNavigationBarSize = bottomNavigationBarSize;
    });
  }

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance
        .addPostFrameCallback((_) => _getbottomNavigationBarSize());
  }

  int _selectedTab = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  final _pageOptions = [
    Text(
      'Index 0: Home',
      style: optionStyle,
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];

  @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: [
              Text("Image"),
            ],
          ),
        ),
        body: _pageOptions[_selectedTab],
        bottomNavigationBar: Stack(
          children: <Widget>[
            BottomNavigationBar(
              key: _bottomNavigationBarKey,
              currentIndex: _selectedTab,
              backgroundColor: Colors.deepOrangeAccent,
              onTap: (int index) {
                setState(() {
                  _selectedTab = index;
                });
              },
              items: [
                BottomNavigationBarItem(
                  icon: Icon(Icons.ac_unit, 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),
                    )),
              ],
            ),
            Positioned(
              left: (_bottomNavigationBarSize.width / _pageOptions.length) *
                  _selectedTab,
              child: Container(
                  height: _bottomNavigationBarSize.height,
                  width: _bottomNavigationBarSize.width / _pageOptions.length,
                  color: Colors.black26),
            ),
          ],
        ),
      ),
    );
  }
}

参考

• Get size and position of a widget in Flutter - Coflutter

Answer 2

检查此answer 我认为这可能会对您有所帮助，基本上它说您应该将导航栏包装在材料小部件（而不是 MatrialApp 小部件）中并覆盖主题并为您的导航栏指定另一个。