水平滚动按钮问题的ListView

Question

嗨，我正在处理 Flutter 项目，我遇到了 Flutter ListView 按钮的问题，所以现在它看起来和我想要的一样，但它不像我想要的那样工作

所以如果你看到上面的图片，如果我点击然后勾选覆盖出现，我需要 setState() 但现在问题是要获得覆盖勾选我需要点击两次我不明白如何解决这个问题或者是是否有任何小部件按钮覆盖我检查了大部分但大多数不起作用或者我不知道？ 在容器内部，我有 14 个相同的列，编号为 1-14 我会让它更紧凑，但首先我需要解决这个问题，这里是代码。

`bool _pressed = false;
 int _btnIndex = 0;
 TabBarView(children: <Widget>[
    Container(
      height: 300,
      // padding: EdgeInsets.only(bottom: 10),
      padding: EdgeInsets.all(10),
      color: Colors.white,
      child: ListView(
      padding: EdgeInsets.all(6),
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            Container(
              alignment: Alignment.center,
              child: Padding(
                padding: const EdgeInsets.all(6.0),
                child: Material(
                  elevation: 4.0,
                  shape: CircleBorder(),
                  clipBehavior: Clip.hardEdge,
                  color: !_pressed && _btnIndex == 1
                      ? Colors.red
                      : Colors.white54,
                  child: Ink.image(
                    image: AssetImage('assets/images/colosseum.jpg'),
                    fit: BoxFit.cover,
                    colorFilter: _pressed && _btnIndex == 1
                        ? ColorFilter.mode(
                            Colors.black87,
                            BlendMode.darken,
                          )
                        : null,
                    width: 60.0,
                    height: 60.0,
                    child: InkWell(
                      // splashColor: Colors.green,
                      focusColor: Colors.red,
                      highlightColor: Colors.white60,
                      // overlayColor: MaterialStateColor(),
                      child: _pressed && _btnIndex == 1
                          ? Icon(
                              Icons.check,
                              color: Colors.white,
                            )
                          : null,
                      // onDoubleTap: () {
                      //   _pressed = !_pressed;
                      // },
                      onTap: () {
                        setState(() {
                          _pressed = !_pressed;
                          _btnIndex = 1;
                        });
                        // _pressed = true;
                        print('I tapped no 1');
                      },
                    ),
                  ),
                ),
              ),
            ),
            Container(
              alignment: Alignment.center,
              child: Text('10'),
            ),
          ],
        ),
      ]),
     ),
  ]);`

Answer 1

只需为此使用 Listview.builder 并在其中使用 Builder 中的 GestureDetector 来更改所选项目

首先取一个变量来跟踪选定的索引

int selected;

然后制作一个 listView Builder 小部件

ListView.builder(
 itemCount:5,
 scrollDirection: Axis.horizontal,
 itemBuilder:(ctx,index){

 return GestureDetector(
  onTap:(){
   selected = index;
   setState((){});
   }
  child: YourWidget(isSelected:this.selected == index);
 );
 }

)

当 isSelected 为 true 时，只需编写在 YourWidget 图像中显示刻度的逻辑

Answer 2

嘿@user2572661 可能是当您触摸容器时可能无法按照您想要的方式进行交互，您可以使用滚动方向为水平的ListView.builder()也有一个小部件，您可以使用它onTap:更改状态或逻辑调用GestureDetector() 。 尽管您能否分享更多代码，以便我理解并纠正您的问题。