Flutter：在 ListView 中按下卡片小部件不起作用

Posted 2023-03-28

【中文标题】Flutter：在 ListView 中按下卡片小部件不起作用

【英文标题】：Flutter: Pressing on Card Widget in ListView Not Working

【发布时间】：2020-10-10 12:44:54

【问题描述】：

我有 ListView builder adsList 其中包含 LstTiles adTile 包含 Card。

当我按下 Card 小部件时，我期待一个操作并导航到另一个屏幕或只是在控制台中打印，但是尽管我将卡片包裹在 GestureDetector 中，但什么也没有发生。

这里是代码

class _AdTileState extends State<AdTile> 
@override
  Widget build(BuildContext context) 
    return Padding(
      padding: EdgeInsets.only(top: 8),
      child: GestureDetector(
        onTap: ()
          print('card pressed');
          Navigator.push(context, new MaterialPageRoute(builder: (context) => AdView()));
        ,
        child: Card(
          margin: EdgeInsets.fromLTRB(20, 6, 20, 0),
          child: ListTile(
          trailing: Image.network(widget.adModel.adImage),
            title: Text(widget.adModel.adName),
            subtitle: Text(widget.adModel.location),

          ),
        ),
      ),
    );
  

这是 AdList 中的代码：

class _AdsListState extends State<AdsList> 
@override
  Widget build(BuildContext context) 

final ads = Provider.of<List<AdModel>>(context);

return ListView.builder(
    scrollDirection: Axis.vertical,
    itemCount:(ads == null) ? 0 :  ads.length,
    itemBuilder: (context, index)
      return
        CustomAdTile(adModel: ads[index],);
    );
  

这是页面上显示 ListView Builder 的代码：

 Widget build(BuildContext context) 
return StreamProvider<List<Profile>>.value(
  value: DatabaseService().profiles,
  child: StreamProvider<List<AdModel>>.value(
    value: DatabaseService().ads,
    child: Directionality(
      textDirection: TextDirection.rtl,
      child: Scaffold(
        appBar: AppBar(),
            body: Column(
              children: <Widget>[
                Container(),
                Row(),                                        
                Expanded(
                    child: AdsList()
                ),
              ],
            ),

CustomAdTile 代码：

    class _CustomAdTileState extends State<CustomAdTile> 
  @override
  Widget build(BuildContext context) 
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 5.0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Expanded(
            flex: 3,
            child:  Padding(
              padding: const EdgeInsets.fromLTRB(0.0, 0.0, 10.0, 0.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    widget.adModel.adName,
                    style: const TextStyle(
                      fontWeight: FontWeight.w500,
                      fontSize: 14.0,
                    ),
                  ),
                  const Padding(padding: EdgeInsets.symmetric(vertical: 2.0)),
                  Text(
                    widget.adModel.location,
                    style: const TextStyle(fontSize: 10.0),
                  ),
                  const Padding(padding: EdgeInsets.symmetric(vertical: 1.0)),
                  Text(
                    '$widget.adModel.category views',
                    style: const TextStyle(fontSize: 10.0),
                  ),
                ],
              ),
            ),
          ),
          const Icon(
            Icons.more_vert,
            size: 16.0,
          ),
          Container(
            height: 80,
            width: 80,
            decoration: BoxDecoration(
              image: DecorationImage(image: NetworkImage(widget.adModel.adImage),
              fit: BoxFit.fill),
            ),
          )
        ],
      ),

    );   
  

【问题讨论】：

选卡有没有报错日志？

它应该可以工作，你能显示更多代码吗？也使用 ListTile 的 ontap 而不是用 GestureDetector 包装

@KuKu 甚至在日志中什么也没有

@Nehal 我添加了更多代码，我也在 ListTile 中使用了 onTap() 并且不适合我

可以添加 AdTile 的代码

【参考方案1】：

您似乎从未使用过 AdTile，您正在使用 CustomAdTile。您需要在 CustomAdTile 中添加 onTap。

这是 CustomAdTile 的更新代码。

class _CustomAdTileState extends State<CustomAdTile> 
  @override
  Widget build(BuildContext context) 
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 5.0),
      child: InkWell(
        ///Add onTap here
        onTap: () 
          print('card pressed');
          Navigator.push(
              context, new MaterialPageRoute(builder: (context) => AdView()));
        ,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Expanded(
              flex: 3,
              child: Padding(
                padding: const EdgeInsets.fromLTRB(0.0, 0.0, 10.0, 0.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      widget.adModel.adName,
                      style: const TextStyle(
                        fontWeight: FontWeight.w500,
                        fontSize: 14.0,
                      ),
                    ),
                    const Padding(padding: EdgeInsets.symmetric(vertical: 2.0)),
                    Text(
                      widget.adModel.location,
                      style: const TextStyle(fontSize: 10.0),
                    ),
                    const Padding(padding: EdgeInsets.symmetric(vertical: 1.0)),
                    Text(
                      '$widget.adModel.category views',
                      style: const TextStyle(fontSize: 10.0),
                    ),
                  ],
                ),
              ),
            ),
            const Icon(
              Icons.more_vert,
              size: 16.0,
            ),
            Container(
              height: 80,
              width: 80,
              decoration: BoxDecoration(
                image: DecorationImage(
                    image: NetworkImage(widget.adModel.adImage),
                    fit: BoxFit.fill),
              ),
            )
          ],
        ),
      ),
    );
  

【讨论】：

你是对的.. 似乎我在代码中迷路了，忘记了我使用 CustomAdTile.. 非常感谢

没问题，我也经常遇到这种简单的错误