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

时间：2019-08-23 20:05:18

标签： android flutter

这是我进入该主题的第二个主题，这一次，我将发布图片和完整代码。 导航栏正在工作，但我希望按下一个指示器（图标下的文本已经放大了一点，但这还不够） 我要让被按下的部分的背景比其他部分更亮。 那怎么可能？我对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),
              )
            ),
          ],
        ),
      ),
    );
  }
}

2 个答案:

答案 0 :(得分：0)

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

答案 1 :(得分：0)

可能的解决方案

  • 使用行和列构建您自己的Widget

  • Flutter是一个开放式的soruse项目，请编辑原始Widget并提交或自行使用

  • 在小部件上绘画

    • 使用Container，Stack和bottomNavigationBar大小移动容器

    • 这是我在这里使用的

屏幕记录

enter image description here

步骤1

在 MyAppState 内部添加 GlobalKey 变量

GlobalKey _bottomNavigationBarKey = GlobalKey();

步骤2

将 GlobalKey 分配给 BottomNavigationBar 

BottomNavigationBar(
   key: _bottomNavigationBarKey,
...)

步骤3

在 MyAppState 内部添加 _bottomNavigationBarSize 变量

  Size _bottomNavigationBarSize = Size(0, 0);

步骤4

在 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

之后添加已定位小部件 
bottomNavigationBar: 
 Stack
 (
  children: <Widget>
    [
    BottomNavigationBar(.....),
    Positioned(.....),
   ],
 )

步骤8

设置已定位小部件左属性

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

  • 第一个项目偏移量= 0 *项目宽度= 0

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

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

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

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

步骤9

在 BottomNavigationBar

之后添加已定位小部件 
Positioned
(
  ...,
  child: Container(.... ),
)

步骤10

在容器中将 height 属性设置为bottomNavigationBar高度

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

步骤10

在容器中，将 width 属性设置为bottomNavigationBar宽度除以页面数

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

步骤11

在容器中，将颜色属性设置为黑色，不透明度为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),
            ),
          ],
        ),
      ),
    );
  }
}

参考

相关问题
最新问题