Flutter 選擇時更改 NavigationBarThemeData labelTextStyle 顏色

Question

我在底部導航欄中使用了 NavigationBarTheme。 我想問一下是否可以在選擇時更改 labelTextStyle？ 目前，我只有灰色。

 bottomNavigationBar: NavigationBarTheme( data: NavigationBarThemeData( height: 65, indicatorColor: Colors.transparent, backgroundColor: Colors.white, labelTextStyle: MaterialStateProperty.all( const TextStyle( fontSize: 13.0, fontWeight: FontWeight.w700, color: Colors.grey, letterSpacing: 1.0, ), ), ),

Answer 1

Hy 有一個名為selectedLableStyle的BottomNavigationBar屬性，您可以像下面這樣使用它 -

bottomNavigationBar: BottomNavigationBar(
  // this is the property use to style lable
  selectedLabelStyle: TextStyle(fontSize: 22),
  selectedItemColor: Colors.red,
  items: const <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.business),
      label: 'Business',
    ),
  ],
),

如果您想在問題中使用NavigationBarTheme ，請使用MaterialStateProperty.resolveWith而不是 MaterialStateProperty.all，如下所示 -

bottomNavigationBar: NavigationBarTheme(
        data: NavigationBarThemeData(
          height: 65,
          indicatorColor: Colors.transparent,
          backgroundColor: Colors.white,
          labelTextStyle: MaterialStateProperty.resolveWith((states) {
            if (states.contains(MaterialState.selected)) {
              return const TextStyle(
                fontSize: 13.0,
                fontWeight: FontWeight.w700,
                color: Colors.red,
                letterSpacing: 1.0,
              );
            }
            return const TextStyle(
              fontSize: 13.0,
              fontWeight: FontWeight.w700,
              color: Colors.grey,
              letterSpacing: 1.0,
            );
          }
          ),
        ),

欲了解更多信息 - BottomNavigationBar ， MaterialStateProperty