如何 select 在 flutter 中使用多个容器？

Question

现在我可以一次 select 一项，但我想 select 多项。我找到了多个 selection 的包，但想在不使用任何包的情况下实现。

  int? selectedIndex;
  final List<String> _wordName = [
    "Engaged in my Life",
    "Feel Alive",
    "Happy",
    "Love my Life",
  ];



GridView.builder(
                      scrollDirection: Axis.vertical,
                      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2,
                        crossAxisSpacing: 3,
                        mainAxisSpacing: 2,
                        childAspectRatio: (16 / 8),
                      ),
                      itemCount: _wordName.length,
                      itemBuilder: (context, index) {
                        return GestureDetector(
                          onTap: () {
                            setState(() {
                              print("now selected ===>>> $index");
                              selectedIndex = index;
                              showButton = true;
                            });
                          },
                          child: Container(
                            margin: EdgeInsets.all(10),
                            decoration: BoxDecoration(
                              color: selectedIndex == index
                                  ? Color(0xffDEB988).withOpacity(0.2)
                                  : Color(0xffF4F4F6).withOpacity(0.5),
                              borderRadius: BorderRadius.circular(5.0),
                              border: Border.all(
                                  color: selectedIndex == index
                                      ? Color(0xffDEB988)
                                      : Colors.transparent,
                                  width: 0.5),
                              image: const DecorationImage(
                                image: AssetImage('assets/images/bg2.png'),
                                fit: BoxFit.cover,
                              ),
                            ),
                            child: Row(
                              children: [
                                Flexible(
                                  child: Center(
                                    child: Text(
                                      _wordName[index].toUpperCase(),
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                        color: selectedIndex == index
                                            ? Color(0xffDEB988)
                                            : Colors.black,
                                        fontWeight: selectedIndex == index
                                            ? FontWeight.bold
                                            : FontWeight.normal,
                                        fontFamily: "Poppins",
                                      ),
                                  }

Answer 1

使用列表存储选择的索引

final List<int> selectedIndexes = [];
  final List<String> _wordName = [
    "Engaged in my Life",
    "Feel Alive",
    "Happy",
    "Love my Life",
  ];



GridView.builder(
                      scrollDirection: Axis.vertical,
                      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2,
                        crossAxisSpacing: 3,
                        mainAxisSpacing: 2,
                        childAspectRatio: (16 / 8),
                      ),
                      itemCount: _wordName.length,
                      itemBuilder: (context, index) {
                        return GestureDetector(
                          onTap: () {
                            setState(() {
                              if(selectedIndexes.contains(index)){
                                selectedIndexes.remove(index);
                              } else {
                                selectedIndexes.remove(index);
                              }
                              showButton = true;
                            });
                          },
                          child: Container(
                            margin: EdgeInsets.all(10),
                            decoration: BoxDecoration(
                              color: selectedIndex == index
                                  ? Color(0xffDEB988).withOpacity(0.2)
                                  : Color(0xffF4F4F6).withOpacity(0.5),
                              borderRadius: BorderRadius.circular(5.0),
                              border: Border.all(
                                  color: selectedIndex == index
                                      ? Color(0xffDEB988)
                                      : Colors.transparent,
                                  width: 0.5),
                              image: const DecorationImage(
                                image: AssetImage('assets/images/bg2.png'),
                                fit: BoxFit.cover,
                              ),
                            ),
                            child: Row(
                              children: [
                                Flexible(
                                  child: Center(
                                    child: Text(
                                      _wordName[index].toUpperCase(),
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                        color: selectedIndex == index
                                            ? Color(0xffDEB988)
                                            : Colors.black,
                                        fontWeight: selectedIndex == index
                                            ? FontWeight.bold
                                            : FontWeight.normal,
                                        fontFamily: "Poppins",
                                      ),
                                  }

Answer 2

您可以选择数组中的项目

示例：

List<int> selectedItems = [];

GestureDetector(
   onTap: () {
     setState(() {
        if (selectedItems.contains(index)){
           selectedItems.remove(index);
        } else {
           selectedItems.add(index);
        }
     }
   },
   child: Container(
       color: selectedItems.contains(index) ? Colors.red : Colors.blue,
       child: Something(),
   ),
),

如何 select 在 flutter 中使用多个容器？

How to select multiple container in flutter?

dart

flutter

flutter-layout