flutter 用容器改变图标的颜色

ewm0tg9j 于 2023-10-22 发布在 Flutter

关注(0)|答案(2)|浏览(142)

我想问我怎么能改变我的图标的颜色，当我导航到下一页，这意味着当我选择的图标是蓝色的页面，然后图标将保持灰色。我试过setState()，但它不适合我。

class _CustomBottomNavigationState extends State<CustomBottomNavigation> {
 @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    return Container(
      width: size.width,
      height: 80,
      child: Stack(
        children: [
          CustomPaint(
            size: Size(size.width, 80),
            painter: BNBCustomPainter(),
          ),
          Center(
            heightFactor: 0.6,
            child: FloatingActionButton(
              onPressed: () {
                widget._addingThings(context);
              },
              backgroundColor: Colors.black,
              child: Icon(Icons.add),
              elevation:0.1,
            ),
          ),
          Container(
            width: size.width,
            height: 80,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                IconButton(icon: Icon(Icons.home), onPressed: () {
                  Navigator.push(context, PageTransition(type: PageTransitionType.rightToLeft, child: MyScreen(), isIos: true));

                }),
                IconButton(icon: Icon(Icons.notifications), onPressed: () {
                  Navigator.push(context, PageTransition(type: PageTransitionType.leftToRight, child: My2Screen()));

                }),
                Container(width: size.width * 0.2),
                IconButton(icon: Icon(Icons.add), onPressed: () {
                  _pickImageFromCamera();
                  Navigator.push(context, MaterialPageRoute(builder: (context) => My3Screen()));
                }),
                IconButton(icon: Icon(Icons.abc), onPressed: () {
                  Navigator.push(context, PageTransition(type: PageTransitionType.leftToRight, child: My4Screen()));

                }),
              ],
            ),
          )
        ],
      ),
    );
  }
}

flutter

来源：https://stackoverflow.com/questions/77295436/flutter-changing-colour-of-the-icon-with-container

2条答案

按热度按时间

eulz3vhy1#

您可以为您的图标按钮创建一个自定义小部件，并在该小部件内部维护selected/selected状态。

class CustomIconButton extends StatefulWidget {
  final IconData icon;
  final bool isSelected;
  final Function onTap;

  CustomIconButton({required this.icon, required this.isSelected, required this.onTap});

  @override
  _CustomIconButtonState createState() => _CustomIconButtonState();
}

class _CustomIconButtonState extends State<CustomIconButton> {
  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: Icon(
        widget.icon,
        color: widget.isSelected ? Colors.blue : Colors.grey,
      ),
      onPressed: widget.onTap,
    );
  }
}

你可以这样使用它：

Container(
  width: size.width,
  height: 80,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      CustomIconButton(
        icon: Icons.home,
        isSelected: currentPageIndex == 0,
        onTap: () {
          setState(() => currentPageIndex = 0;

          Navigator.push(context, PageTransition(type: PageTransitionType.rightToLeft, child: MY4Screen(), isIos: true));
        },
      ),
      CustomIconButton(
        icon: Icons.notifications,
        isSelected: currentPageIndex == 1,
        onTap: () {
          setState(() => currentPageIndex = 1;
       
          Navigator.push(context, PageTransition(type: PageTransitionType.leftToRight, child: ReminderScreen()));
        },
      ),
      Container(width: size.width * 0.2),
      CustomIconButton(
        icon: Icons.abc,
        isSelected: currentPageIndex == 2,
        onTap: () {
          setState(() => currentPageIndex = 2;

          _pickImageFromCamera();
          Navigator.push(context, MaterialPageRoute(builder: (context) => MyScreen()));
        },
      ),
      CustomIconButton(
        icon: Icons.ac_unit,
        isSelected: currentPageIndex == 3,
        onTap: () {
          setState(() => currentPageIndex = 3;

          Navigator.push(context, PageTransition(type: PageTransitionType.leftToRight, child: MY2Screen()));
        },
      ),
    ],
  ),
)

赞(0）回复(0）举报 2023-10-22

643ylb082#

Container(
    width: MediaQuery.of(context).size.width,
    height: 80,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        IconButton(
            icon: Icon(
              Icons.home,
              color: selectedIndex == 1 ? Colors.blue : Colors.grey,
            ),
            onPressed: () {
              Get.to(() => Card());
              setState(() {
                selectedIndex = 1;
              });
            }),
        IconButton(
            icon: Icon(Icons.notifications, color: selectedIndex == 2 ? Colors.blue : Colors.grey),
            onPressed: () {
              Get.to(() => Card());
              setState(() {
                selectedIndex = 2;
              });
            }),
        Container(width: MediaQuery.of(context).size.width * 0.2),
        IconButton(
            icon: Icon(Icons.abc, color: selectedIndex == 3 ? Colors.blue : Colors.grey),
            onPressed: () {
              Get.to(() => MyOrder(filterType: ''));
              setState(() {
                selectedIndex = 3;
              });
            }),
        IconButton(
            icon: Icon(Icons.ac_unit, color: selectedIndex == 4 ? Colors.blue : Colors.grey),
            onPressed: () {
              Get.to(() => AccessoriesPage());
              setState(() {
                selectedIndex = 4;
              });
            }),
      ],
    ),
  )

创建变量selectedIndex

赞(0）回复(0）举报 2023-10-22

我来回答

flutter 用容器改变图标的颜色

2条答案

相关问题

热门标签

最新问答