dart 如何删除或增加NavigationBar中的选定装饰

h7appiyu 于 2023-06-19 发布在其他

关注(0)|答案(3)|浏览(107)

如何在flutter中移除或增加NavigationBar中所选项目的装饰？

NavigationBar(
        elevation: 0,
        selectedIndex: navIndex,
        onDestinationSelected: (index) => setState(() {
          navIndex = index;
        }),
        backgroundColor: Colors.transparent,
        labelBehavior: NavigationDestinationLabelBehavior.alwaysHide,
        destinations: const [
          NavigationDestination(
            icon: Text('Your subscriptions'),
            label: '',
          ),
          NavigationDestination(
            icon: Text('Upcoming bills'),
            label: '',
          ),
        ],
      ),

装饰意象

dart

来源：https://stackoverflow.com/questions/72909874/how-to-remove-or-increase-selected-decoration-in-navigationbar

3条答案

按热度按时间

rslzwgfq1#

通常，NavigationDestination图标必须是Icon（）小部件。但对你来说是短信。这就是文本超出突出显示区域的原因。

NavigationDestination(
        icon: <This has to be a Icon>
        label: '',
),

图标将使用“NavigationBarThemeData.iconTheme”，如果“NavigationBarThemeData”不存在，图标将使用“IconThemeData”。在这两种情况下，我都找不到改变高亮区域大小的方法。
你可以做这样的事情，它会做的工作，但不是那么顺利。

int _selectedIndex = 0; // local variable


      NavigationDestination(
        icon: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(20)),
                color: _selectedIndex == 0 ? Colors.blue.shade100 : Colors.transparent,
                shape: BoxShape.rectangle),
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Text('Your subscriptions'),
            )),
        label: 'Your subscriptions',
      ),

赞(0）回复(0）举报 2023-06-19

xxls0lw82#

如果您使用的是BottomNavigationBar，则可以使用此选项更改导航栏中内容的颜色、文本样式和字体大小。

BottomNavigationBar(
selectedItemColor: Colors.white
selectedLabelStyle: const TextStyle(color: Colors.white),
selectedFontSize: 12,
ontap:(){...}
)

赞(0）回复(0）举报 2023-06-19

vhmi4jdf3#

通过添加NavigationBarThemeData（）.copyWith并为所选对象提供透明的十六进制值，解决了同样的问题

navigationBarTheme: const NavigationBarThemeData().copyWith(
                indicatorColor: const Color(0X00000000)
            )

生成的nav看起来像这样

NavigationDestination(
                    selectedIcon: Icon(Icons.home_filled,color: Colors.grey[700]),
                    icon: const Icon(Icons.home_outlined,),
                    label: 'Home',
                  )

赞(0）回复(0）举报 2023-06-19

我来回答

dart 如何删除或增加NavigationBar中的选定装饰

3条答案

相关问题

热门标签

最新问答