更改文本颜色的函数回调（仅供一个）|扑

Question

我正在尝试创建一个具有不同 SideMenuItem 的 SideMenu。为此，我创建了一个新的 class 并希望在单击 SideMenuItem 时更新文本的颜色。为此，我想传输 activeState 以及您在下面的代码中看到的所有内容：

我的class在Widget中的使用：

bool isActive = false;
...
            SideMenuItem(
              icon: Icon(
                Icons.inbox,
                size: 20,
                color: isActive ? kPrimaryColor : kGrayColor,
              ),
              activeState: isActive,
              title: "Archiv",
              toggleActiveState: (activeState) {
                setState(() {
                  isActive = !activeState;
                });
              },
            ),

这是我的 class:

import 'package:flutter/material.dart';
import 'package:gastronomy/constants.dart';

class SideMenuItem extends StatelessWidget {
  // ignore: prefer_const_constructors_in_immutables
  SideMenuItem({
    Key? key,
    required this.activeState,
    this.itemCount = 0,
    this.showBorder = true,
    @required this.icon,
    @required this.title,
    required this.toggleActiveState,
  }) : super(key: key);

  final bool activeState;
  final bool showBorder;
  final int itemCount;
  final Icon? icon;
  final String? title;
  final Function(bool) toggleActiveState;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: kDefaultPadding),
      child: InkWell(
        onTap: () {
          toggleActiveState(activeState);
        },
        child: Row(
          children: [
            const SizedBox(width: 15),
            const SizedBox(width: kDefaultPadding / 4),
            Expanded(
              child: Container(
                padding: const EdgeInsets.only(bottom: 15, right: 5),
                decoration: showBorder
                    ? const BoxDecoration(
                        border: Border(
                          bottom: BorderSide(color: Color(0xFFDFE2EF)),
                        ),
                      )
                    : null,
                child: Row(
                  children: [
                    icon!,
                    const SizedBox(width: kDefaultPadding * 0.75),
                    Text(
                      title!,
                      style: Theme.of(context).textTheme.button?.copyWith(
                            color: activeState ? kTextColor : kGrayColor,
                          ),
                    ),
                    const Spacer(),
                    // if (itemCount != null) CounterBadge(count: itemCount)
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

我最终得到了那段代码，但是，你可能知道，当我单击其中一个时，所有 SideMenuItems 都会改变颜色。我对使用这种代码方式还很陌生，所以我将感谢您可以包含在您的答案中的所有信息。

Answer 1

一个选项是通过映射函数呈现所有菜单项，并将每个项目与所选选项进行比较，如下例所示：

import 'package:flutter/material.dart';

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

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

class _MenuExampleState extends State<MenuExample> {
  List<String> menuOptions = const ['Item 1', 'Item 2', 'Item 3'];

  String selectedOption = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        backgroundColor: Colors.amber,
        child: ListView(
            children: menuOptions.map((menuOption) {
          return InkWell(
            onTap: () => setState(() {
              selectedOption = menuOption;
            }),
            child: MenuItem(
              name: menuOption,
              isSelected: menuOption == selectedOption,
            ),
          );
        }).toList()),
      ),
    );
  }
}

class MenuItem extends StatelessWidget {
  const MenuItem({Key? key, this.isSelected = false, required this.name})
      : super(key: key);

  final bool isSelected;
  final String name;

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(
        name,
        style: TextStyle(
            fontWeight: isSelected ? FontWeight.bold : FontWeight.normal),
      ),
    );
  }
}

更改文本颜色的函数回调（仅供一个）|扑

Function callback to change text color (just for one) | Flutter

state

function

flutter