飘动 ||更改 navBar selecteditem 的背景

Question

在我的 flutter 项目中，我使用了 scroll_navigation，但我想更改 selected 项目的背景，但我不知道如何更改。这几天我无法解决这个问题。非常感谢任何帮助。

如果我 select 背景变灰的图标会这样 :

这是我的代码：

@override
    Widget build(BuildContext context) {
      return ScrollNavigation(
        bodyStyle: NavigationBodyStyle(
          background: Colors.white,
          borderRadius: BorderRadius.horizontal(left: Radius.circular(20)),
          scrollDirection: Axis.vertical,
        ),
        barStyle: NavigationBarStyle(
          position: NavigationPosition.left,
          elevation: 0.0,
          background: Colors.white,
        ),
        pages: [
          Container(color: Colors.blue[100]),
          Container(color: Colors.green[100]),
          Container(color: Colors.purple[100]),
          Container(color: Colors.amber[100]),
          Container(color: Colors.deepOrange[100])
        ],
        items: const [
          ScrollNavigationItem(icon: Icon(Icons.camera)),
          ScrollNavigationItem(icon: Icon(Icons.chat)),
          ScrollNavigationItem(icon: Icon(Icons.favorite)),
          ScrollNavigationItem(icon: Icon(Icons.notifications)),
          ScrollNavigationItem(icon: Icon(Icons.home))
        ],
      );
    }

Answer 1

我认为您使用的 ScrollNavigation 包是有限的，您无法使用它来做到这一点。您为什么不制作模仿该包的自定义导航并根据您的需要对其进行自定义，如下所示：class

CustomScrollNavigation extends StatefulWidget {
  const CustomScrollNavigation({Key? key}) : super(key: key);

  @override
  State<CustomScrollNavigation> createState() => _CustomScrollNavigationState();
}

class _CustomScrollNavigationState extends State<CustomScrollNavigation> {
  int selectedIndex = 0;
  void changeSelectedIndex(int index) {
    setState(() {
      selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    final containerWidth = MediaQuery.of(context).size.width * .3333;

    return SizedBox(
      width: MediaQuery.of(context).size.width,
      child: Stack(
        children: [
          Row(
            children: [
              Expanded(
                child: Container(
                  color: selectedIndex == 0 ? Colors.grey.shade300 : null,
                  child: IconButton(
                    onPressed: () => changeSelectedIndex(0),
                    icon: Icon(
                      Icons.note,
                      color: selectedIndex == 0 ? Colors.blue : null,
                    ),
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  color: selectedIndex == 1 ? Colors.grey.shade300 : null,
                  child: IconButton(
                    onPressed: () => changeSelectedIndex(1),
                    icon: Icon(
                      Icons.card_membership,
                      color: selectedIndex == 1 ? Colors.blue : null,
                    ),
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  color: selectedIndex == 2 ? Colors.grey.shade300 : null,
                  child: IconButton(
                    onPressed: () => changeSelectedIndex(2),
                    icon: Icon(
                      Icons.person,
                      color: selectedIndex == 2 ? Colors.blue : null,
                    ),
                  ),
                ),
              ),
            ],
          ),
          AnimatedPositioned(
            bottom: 0,
            left: selectedIndex * containerWidth,
            duration: const Duration(milliseconds: 200),
            child: Container(
              height: 3,
              width: containerWidth,
              decoration: const BoxDecoration(color: Colors.blue),
            ),
          ),
        ],
      ),
    );
  }
}

飘动 ||更改 navBar selecteditem 的背景

FLUTTER || changing background of navBar selecteditem

android

navbar

dart

flutter