Question

我正在查看一个具有垂直放置的不同卡片的UI，我尝试添加onTap功能来为每个不同的卡片打开一个单独的页面。在该UI中，放置了垂直卡片，其中包含图像，标题和“稍后阅读”数据，在clipReact上方添加手势检测器以添加onTap素材页面路线功能，并在稍后阅读按钮下方添加onTap，但我应将onTap放置在何处

onTap: () => Navigator.of(context)
                      .push(MaterialPageRoute(builder: (_) => /*what to define here*/)),

是否可以为不同卡的单独页面添加单独的onTap功能？

class CardScrollWidget extends StatelessWidget {
  var currentPage;
  var padding = 20.0;
  var verticalInset = 20.0;
  CardScrollWidget(this.currentPage);
  @override
  Widget build(BuildContext context) {
    return new AspectRatio(
      aspectRatio: widgetAspectRatio,
      child: LayoutBuilder(builder: (context, contraints,) {
        var width = contraints.maxWidth;
        var height = contraints.maxHeight;
        var safeWidth = width - 2 * padding;
        var safeHeight = height - 2 * padding;
        var heightOfPrimaryCard = safeHeight;
        var widthOfPrimaryCard = heightOfPrimaryCard * cardAspectRatio;
        var primaryCardLeft = safeWidth - widthOfPrimaryCard;
        var horizontalInset = primaryCardLeft / 2;
        List<Widget> cardList = new List();
        for (var i = 0; i < images.length; i++) {
          var delta = i - currentPage;
          bool isOnRight = delta > 0;
          var start = padding + max(primaryCardLeft -horizontalInset * -delta * (isOnRight ? 15 : 1),
                  0.0);
          var cardItem = Positioned.directional(
            top: padding + verticalInset * max(-delta, 0.0),
            bottom: padding + verticalInset * max(-delta, 0.0),
            start: start,
            textDirection: TextDirection.rtl,
            child: GestureDetector(
            child: ClipRRect(
              borderRadius: BorderRadius.circular(16.0),
              child:Container(
                decoration: BoxDecoration(color: Colors.white, boxShadow: [
                  BoxShadow(
                      color: Colors.black12,
                      offset: Offset(3.0, 6.0),
                      blurRadius: 10.0)
                ]),
                child: AspectRatio(
                  aspectRatio: cardAspectRatio,
                  child: Stack(
                    fit: StackFit.expand,
                    children: <Widget>[
                      Image.asset(images[i], fit: BoxFit.cover),
                      Align(
                        alignment: Alignment.bottomLeft,
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Padding(
                              padding: EdgeInsets.symmetric(
                                  horizontal: 16.0, vertical: 8.0),
                              child: Text(title[i],
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 25.0,
                                      fontFamily: "SF-Pro-Text-Regular")),
                            ),
                            SizedBox(
                              height: 10.0,
                            ),
                            Padding(
                              padding: const EdgeInsets.only(
                                  left: 12.0, bottom: 12.0),
                              child: Container(
                                padding: EdgeInsets.symmetric(
                                    horizontal: 22.0, vertical: 6.0),
                                decoration: BoxDecoration(
                                    color: Colors.blueAccent,
                                    borderRadius: BorderRadius.circular(20.0)),
                                child: Text("Read Later",
                                    style: TextStyle(color: Colors.white)),),),],),)],)),),),
              onTap: () => Navigator.of(context).push(MaterialPageRoute(builder: (_) => )),

            ),);
          cardList.add(cardItem);
        }
        return Stack(
          children: cardList,
        );}),);}}

数据-

List<String> images = [
  "assets/image_04.jpg",
  "assets/image_03.jpg",
  "assets/image_02.jpg",
  "assets/image_01.png",
];

List<String> title = [
  "Hounted Ground",
  "Fallen In Love",
  "The Dreaming Moon",
  "Jack the Persian and the Black Castel",
];

Answer 1

  onTap: () => Navigator.of(context).push(MaterialPageRoute(
                  builder: (_) => (i == 0)
                      ? pageOne()
                      : (i == 1)
                          ? pageTwo()
                          : (i == 2)
                              ? pageThree()
                              : pageFour())),

Answer 2

您可以更改数据结构以放置目标页面，并将其放入MaterialPageRoute构建器方法中。

List pages = [
  {
    "image" : "assets/image_01.png",
    "title" : "Hounted Ground 1",
    "page" : YOURWIDGET(),
  },
 {
    "image" : "assets/image_02.png",
    "title" : "Hounted Ground2",
    "page" : YOURWIDGET(),
  },
 {
    "image" : "assets/image_03.png",
    "title" : "Hounted Ground 3",
    "page" : YOURWIDGET(),
  }
];

// in your cards page build method
// note that you should place below code in a multi widget support widget like Column(), ListView(), ...
Column(
  children: pages.map((page) {
    return Card(
       // card content and attributes
       onTap: () {
         Navigator.of(context).push(MaterialPageRoute(
            builder: (BuildContext ctx) {
                return page['page'];
            }
         ));
       }
    );

  }).toList()
);

为单独的卡添加不同的onTap页面

2 个答案: