dart Tap卡上的手势检测器

rmbxnbpk 于 2023-05-26 发布在其他

关注(0)|答案(4)|浏览(151)

new Expanded(

        child: _searchResult.length != 0 || controller.text.isNotEmpty
            ? new ListView.builder(
                itemCount: _searchResult.length,
                itemBuilder: (context, int i) {

                  return new Card(

                      child: new Column(
                          mainAxisSize: MainAxisSize.min,
                          children: <Widget>[
                        new Row(children: <Widget>[
                          //new GestureDetector(),

                          new Container(

                              width: 45.0,
                              height: 45.0,
                              decoration: new BoxDecoration(
                                  shape: BoxShape.circle,
                                  image: new DecorationImage(
                                      fit: BoxFit.fill,
                                      image: new NetworkImage(
                                          "https://raw.githubusercontent.com/flutter/website/master/_includes/code/layout/lakes/images/lake.jpg")))),
                          new Text(
                              " " +
                                  userDetails[returnTicketDetails[i]
                                      ["user_id"]]["first_name"] +
                                  " " +
                                  (userDetails[returnTicketDetails[i]
                                      ["user_id"]]["last_name"]),
                              style: const TextStyle(
                                  fontFamily: 'Poppins', fontSize: 20.0)),
                        ]),
                        new Column(
                          children: <Widget>[
                            new Align(
                                alignment: FractionalOffset.topRight,
                                child: new FloatingActionButton(
                                  onPressed: () {

                                    groupId = returnTicketDetails[i]["id"];

                                    print(returnTicketDetails[i]["id"]);
                                    print(widget.id);

                                    Navigator.push(
                                        context,
                                        new MaterialPageRoute(
                                            builder: (context) => new Tickets(groupId,widget.id)));

                                  },
                                  heroTag: null,
                                  backgroundColor: Color(0xFF53DD6C),
                                  child: new Icon(Icons.arrow_forward),
                                )),
                            new Padding(padding: new EdgeInsets.all(3.0)),
                          ],
                        )
                      ]));
                },
              )
            : new ListView.builder(
                itemCount: _searchResult.length,
                itemBuilder: (context, int i) {
                  return new Card(
                    child: new ListTile(
                        //title: new Text(userDetails[returnTicketDetails[i]["user_id"]]["first_name"]),
                        ),
                    margin: const EdgeInsets.all(0.0),
                  );
                },
              ),
      ),

大家好！当我在ListView中动态地构建一个Card时，我在想，与其像我已经做的那样在每个Card中保留FloatingActionButton，不如在每个Card中实现一个onTap方法并触发一些东西。换句话说，我想保持卡尽可能简单，没有很多小部件左右。感谢您的评分

dart

来源：https://stackoverflow.com/questions/50662428/gesturedetector-ontap-card

4条答案

按热度按时间

5lwkijsr1#

由于Card是“一张材质”，您可能希望使用InkWell，它包括 Material 高亮和飞溅效果，基于最接近的Material祖先。

return Card(
  child: InkWell(
    onTap: () {
        // Function is executed on tap.
    },
    child: ..,
  ),
);

赞(0）回复(0）举报 2023-05-26

k2arahey2#

你真的应该把孩子包在墨水池里，而不是卡片里：

return Card(
    child: InkWell(onTap: () {}, 
                   child: Text("hello")));

这将使飞溅动画正确地出现在卡内而不是卡外。

赞(0）回复(0）举报 2023-05-26

relj7zay3#

只需将带有手势检测器的卡 Package 如下，

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new ListView.builder(
      itemBuilder: (context, i) {
        new GestureDetector(
          child: new Card(
          ....    
          ),
          onTap: onCardTapped(i),
        );
      },
    );
  }

  onCardTapped(int position) {
    print('Card $position tapped');
  }
}

赞(0）回复(0）举报 2023-05-26

zazmityj4#

我可能会晚很多个月。但这里是你需要做的，以获得墨水池飞溅正确的卡范围内。
将以下行添加到您的卡片小部件中，并像使用它的子控件一样使用inkwell。