Flutter：堆栈中的 ontap

Question

我仍然在处理颤振，所以我希望这很容易解决

我有一段代码可以加载 JSON 提要，将其放在一列中并显示各个项目。我想要一个 onTap 将屏幕重定向到详细信息屏幕。 我想打个电话：

onTap: (){ showVehiclePage(context, snapshot.data.vehicles[index]); },

挑战在于，我不知道如何让它发挥作用。我无法将 onTap 放置在任何地方，我尝试使用 InkWell，但我不知道如何正确放置它。我还是有点晕，但是当我点击堆栈子项时如何调用我的 showVehiclePage 函数？

class browseRC extends StatelessWidget {
  final Future<Vehicles> vehicles;

  browseRC({Key key, this.vehicles}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Browse RCs',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Center(
          child: FutureBuilder<Vehicles>(
            future: vehicles,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                ListView.builder(
                  itemCount: snapshot.data.vehicles.length,
                  itemBuilder: (context, index) {
                    //Vehicle thisVeh = snapshot.data.vehicles[index];
                    return Column(
                      children: <Widget>[
                        Stack(
                        children: <Widget>[
                          FadeInImage.memoryNetwork(
                            placeholder: kTransparentImage,
                            image: '${snapshot.data.vehicles[index].defImage}',
                            height: 250,
                            fit: BoxFit.cover,
                          ),
                          Container(
                            padding: EdgeInsets.all(5.0),
                            margin: EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 5.0),
                            //width: 250,
                            height: 250,
                            alignment: Alignment.bottomCenter,
                            decoration: BoxDecoration(
                              gradient: LinearGradient(
                                begin: Alignment.topCenter,
                                end: Alignment.bottomCenter,
                                colors: <Color>[
                                  Colors.black.withAlpha(0),
                                  Colors.black12,
                                  Colors.black87
                                ],
                              ),
                            ),

                            child: Text(
                              '${snapshot.data.vehicles[index].title}',
                              style: TextStyle(
                                  color: Colors.white, fontSize: 20.0),
                            ),
                          )
                        ])
                      ],
                    );
                  },
                );
              } else if (snapshot.hasError) {
                return Text("${snapshot.error}");
              }
              // By default, show a loading spinner.
              return CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }

  void showVehiclePage(BuildContext context, Vehicle vehicle) {
    Navigator.push(
        context,
        new MaterialPageRoute<Null>(
            settings: const RouteSettings(name: VehiclePage.routeName),
            builder: (BuildContext context) => new VehiclePage(vehicle)));
  }
}

Answer 1

您可以在下面复制粘贴运行完整代码
第一步：可以查看ConnectionState
第 2 步：您可以使用 InkWell 换行 Column
代码sn-p

 return ListView.builder(
                        itemCount: snapshot.data.vehicles.length,
                        itemBuilder: (context, index) {
                          //Vehicle thisVeh = snapshot.data.vehicles[index];
                          return InkWell(
                            onTap: () {
                              showVehiclePage(
                                  context, snapshot.data.vehicles[index]);
                            },
                            child: Column(
                              children: <Widget>[

工作演示

完整代码

import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';

class Vehicles {
  List<Vehicle> vehicles;
  Vehicles({this.vehicles});
}

Future<Vehicles> getVehicles() {
  var a = [
    Vehicle(title: "a", defImage: "https://picsum.photos/250?image=9"),
    Vehicle(title: "b", defImage: "https://picsum.photos/250?image=10")
  ];
  print("return");
  return Future.value(Vehicles(vehicles: a));
}

class browseRC extends StatelessWidget {
  final Future<Vehicles> vehicles;

  browseRC({Key key, this.vehicles}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Browse RCs',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
            body: Center(
          child: FutureBuilder<Vehicles>(
              future: vehicles,
              builder: (context, snapshot) {
                switch (snapshot.connectionState) {
                  case ConnectionState.none:
                    return Text('none');
                  case ConnectionState.waiting:
                    return Center(child: CircularProgressIndicator());
                  case ConnectionState.active:
                    return Text('');
                  case ConnectionState.done:
                    if (snapshot.hasError) {
                      return Text(
                        '${snapshot.error}',
                        style: TextStyle(color: Colors.red),
                      );
                    } else {
                      return ListView.builder(
                        itemCount: snapshot.data.vehicles.length,
                        itemBuilder: (context, index) {
                          //Vehicle thisVeh = snapshot.data.vehicles[index];
                          return InkWell(
                            onTap: () {
                              showVehiclePage(
                                  context, snapshot.data.vehicles[index]);
                            },
                            child: Column(
                              children: <Widget>[
                                Stack(children: <Widget>[
                                  FadeInImage.memoryNetwork(
                                    placeholder: kTransparentImage,
                                    image:
                                        '${snapshot.data.vehicles[index].defImage}',
                                    height: 250,
                                    fit: BoxFit.cover,
                                  ),
                                  Container(
                                    padding: EdgeInsets.all(5.0),
                                    margin:
                                        EdgeInsets.fromLTRB(0.0, 5.0, 0.0, 5.0),
                                    //width: 250,
                                    height: 250,
                                    alignment: Alignment.bottomCenter,
                                    decoration: BoxDecoration(
                                      gradient: LinearGradient(
                                        begin: Alignment.topCenter,
                                        end: Alignment.bottomCenter,
                                        colors: <Color>[
                                          Colors.black.withAlpha(0),
                                          Colors.black12,
                                          Colors.black87
                                        ],
                                      ),
                                    ),

                                    child: Text(
                                      '${snapshot.data.vehicles[index].title}',
                                      style: TextStyle(
                                          color: Colors.white, fontSize: 20.0),
                                    ),
                                  )
                                ])
                              ],
                            ),
                          );
                        },
                      );
                    }
                }
              }),
        )));
  }

  void showVehiclePage(BuildContext context, Vehicle vehicle) {
    Navigator.push(
        context,
        MaterialPageRoute<Null>(
            builder: (BuildContext context) => VehiclePage(vehicle)));
  }
}

class Vehicle {
  String defImage;
  String title;

  Vehicle({this.title, this.defImage});
}

class VehiclePage extends StatelessWidget {
  final Vehicle vehicle;
  VehiclePage(this.vehicle);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
          appBar: AppBar(
            title: Text("${vehicle.title}"),
          ),
          body: Column(
            children: [
              Text("${vehicle.title}"),
              FadeInImage.memoryNetwork(
                placeholder: kTransparentImage,
                image: '${vehicle.defImage}',
                height: 250,
                fit: BoxFit.cover,
              ),
            ],
          )),
    );
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: browseRC(
        vehicles: getVehicles(),
      ),
    );
  }
}

Answer 2

您应该看看GestureDetector 小部件。

https://api.flutter.dev/flutter/widgets/GestureDetector-class.html

您可以像这样用这个小部件包装您的Container 或Image，并以您想要的方式使用onTap 方法。

  GestureDetector(
    onTap: () {
      showVehiclePage(context, snapshot.data.vehicles[index]);
    },
    child: Container(,
      child: OtherWidget(),
    ),
  ),

我希望这能给你一个想法，在你的代码中尝试类似的东西。