时间戳

首页 > 解决方案 > ListView 的水平滚动按钮问题

flutter - ListView 的水平滚动按钮问题

问题描述

嗨，我正在开发 Flutter 项目我遇到了 Flutter ListView 按钮的问题，所以现在它看起来和我想要的一样，但它不能按照我想要的方式工作

在此处输入图像描述

因此，如果您在单击时看到上图，则会出现勾选覆盖，因为我需要 setState() 但问题是现在要获得覆盖勾选我需要点击两次我不明白如何解决这个问题或者是是否有任何 onclick 覆盖的小部件按钮，我检查了其中的大多数，但大多数都不起作用或我不知道？在容器内部，我有 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'),
            ),
          ],
        ),
      ]),
     ),
  ]);`

标签： flutterflutter-layout

解决方案

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

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

int selected;

然后制作一个 listView Builder Widget

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

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

)

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

推荐阅读