当我使用ListView时，ListTile OnTap正常工作.但是当我使用ListWheelScrollView时不起作用 [英] ListTile OnTap is working when I use ListView. But when i use ListWheelScrollView it doesnt work

问题描述

当我使用ListView时，ListTile OnTap正常工作.但是，当我使用ListWheelScrollView时，它不起作用.我的意思是它不会被窃听.视图改变.但是我似乎无法点击它.我在很多地方和链接中寻找解决方案，但仍然找不到解决方案.

ListTile OnTap is working when I use ListView. But when i use ListWheelScrollView it doesn't work. I mean it doesn't get tapped. The view changes. But i can't seem to tap it. I looked for the solution in a lot of places and links but still couldn't find the solutions.

这些是我编写的代码.

@override
  Widget build(BuildContext context) {
    return new ListWheelScrollView(
      physics:FixedExtentScrollPhysics(),
      children: getPostList(),
      itemExtent: 100.0,
    );
  }

  List<PostListItem> getPostList() {
    return _postModal
        .map((contact) => new PostListItem(contact))
        .toList();
  }

这是我构建ListTile的地方

And this is where I have built the ListTile

@override
  Widget build(BuildContext context) {
    return new ListTile(
      onTap:  () {
          var route = new MaterialPageRoute(
            builder: (BuildContext context) =>
                new OnTapPost(value: _postModal.fullName),
          );
          Navigator.of(context).push(route);
        },
        leading: new Image.asset('assets/images/logo.png'),
        title: new Text(_postModal.fullName),
        subtitle: new Text(_postModal.email)
    );

  }

在上面的代码中，列表项没有被点击.但是，如果我将ListWheelScrollView替换为ListView，如下所示，则可以正常工作.

In the above code the list items doesn't get tapped. But if i replace the ListWheelScrollView with ListView as shown below, it works perfectly.

@override
  Widget build(BuildContext context) {
    return new ListView(
      children: getPostList(),
    );
  }

  List<PostListItem> getPostList() {
    return _postModal
        .map((contact) => new PostListItem(contact))
        .toList();
  }

推荐答案

更新:扑扑团队的另一个目光还没有更新，但另一个黑客解决方案.通过使用Gesturedetector包装整个listcrollwheel小部件.每个滚动使用"onSelectedItemChanged"设置状态.用于listscrollview.但是手势检测器小部件只能在轻按时对其执行某些操作.

Update: Another look no update yet from the flutter team but another hack solution. By wrapping the whole listscrollwheel widget with a Gesturedetector. Every scroll sets the state using the "onSelectedItemChanged" for listscrollview. But the gesture detector widget does something with it only on tap.

  import 'package:flutter/cupertino.dart';
  import 'package:flutter/material.dart';
   
    
    class ServicesList extends StatefulWidget {
    
      final type;
    
      ServicesList({this.type});
    
      @override
      _ServicesListState createState() => _ServicesListState();
    }
    
    class _ServicesListState extends State<ServicesList> {
    
      double _height ,_width;
      int serviceIndex;
      final FixedExtentScrollController _controller = FixedExtentScrollController();

 

List<Service> serviceList = [
    Service(name: 'service 1'),
    Service(name: 'service 4'),
    Service(name: 'service 3'),

];
    
      @override
      void initState() {
    
        serviceIndex = 0;
        // TODO: implement initState
        super.initState();
      }
    
      detectService(index) {
        print('clicked container : $index'); //do whatever you want with the clicked index
      }
    
    
      @override
      Widget build(BuildContext context) {
    
        _height = MediaQuery.of(context).size.height;
        _width = MediaQuery.of(context).size.width;
               
        return scrollWheel();
      }
    
    
    
      Widget scrollWheel() {
        return GestureDetector(
          onTap: (){
            detectService(serviceIndex);
            },
          child: ListWheelScrollView(
            controller: _controller,
            diameterRatio: 1.5,
            itemExtent: 80,
            onSelectedItemChanged: (e)=>{
    
              setState(() {
                serviceIndex = e;
              })
            },
            magnification: 0.2,
            physics: FixedExtentScrollPhysics(),
            children: serviceList.map((e) {
    
    
                return Container(
                  padding:  const EdgeInsets.all(6.0),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10.0),
                    color: Colors.blue,
                  ),
                  child:Text('item $e.name');
                );
          }).toList(), //List of widgets
          ),
        );
      }
    }
  
   class Service {
      String name;
 
     Service( {this.name} );
  }

这篇关于当我使用ListView时，ListTile OnTap正常工作.但是当我使用ListWheelScrollView时不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！