如何在Flutter中使用Material 3 NavigationBar实现类似Gmail的外观,而没有文本标签和标签文本空间?

33qvvth1  于 2023-05-23  发布在  Flutter
关注(0)|答案(1)|浏览(122)

我使用的是Material 3NavigationBar,目标是像Gmail**一样的外观,没有文本标签,底部的导航栏中没有标签文本的空间。

源代码:

bottomNavigationBar: NavigationBar(
            backgroundColor: const Color(0xFFF2F6F3),
            indicatorColor: const Color(0xFFB9F0CB),
            selectedIndex: _currentIndex,
            onDestinationSelected: (int index) {
              setState(() {
                _currentIndex = index;
              });
            },
            // selectedLabelStyle: const TextStyle(fontSize: 0),
            // unselectedLabelStyle: const TextStyle(fontSize: 0),
            destinations: const <NavigationDestination>[
              NavigationDestination(
                selectedIcon: Icon(Icons.window),
                icon: Icon(Icons.window_outlined),
                label: '',
              ),
              NavigationDestination(
                selectedIcon: Icon(Icons.search),
                icon: Icon(Icons.search_outlined),
                label: '',
              ),
              NavigationDestination(
                selectedIcon: Icon(Icons.person),
                icon: Icon(Icons.person_outline),
                label: '',
              ),
            ],
          ),

标签空间仍在的实际输出:

标签没有空格的预期输出:

i2byvkas

i2byvkas1#

找到一个简单的解决方案,只需在NavigationBar内添加以下代码:

labelBehavior: NavigationDestinationLabelBehavior.alwaysHide,

参考:

Flutter下面的这个Playground演示了可用labelBehavior选项之间的差异。
Flutter NavigationBar类🐦

最终代码:

bottomNavigationBar: NavigationBar(
            backgroundColor: const Color(0xFFF2F6F3),
            indicatorColor: const Color(0xFFB9F0CB),
            selectedIndex: _currentIndex,
            onDestinationSelected: (int index) {
              setState(() {
                _currentIndex = index;
              });
            },
            labelBehavior: NavigationDestinationLabelBehavior.alwaysHide,
            // selectedLabelStyle: const TextStyle(fontSize: 0),
            // unselectedLabelStyle: const TextStyle(fontSize: 0),
            destinations: const <NavigationDestination>[
              NavigationDestination(
                selectedIcon: Icon(Icons.window),
                icon: Icon(Icons.window_outlined),
                label: 'Home',
              ),
              NavigationDestination(
                selectedIcon: Icon(Icons.search),
                icon: Icon(Icons.search_outlined),
                label: '',
              ),
              NavigationDestination(
                selectedIcon: Icon(Icons.person),
                icon: Icon(Icons.person_outline),
                label: '',
              ),
            ],
          ),

相关问题