如何在Flutter中自定义列表视图的每个界面？

Question

我正在开发带有List of Cards的产品目录，每张Card都有一个按钮，但是当我按下它时，所有Card会将我定向到同一活动，我该如何制作每张Card参加了另一项活动并按照自己的方式进行了修改。

我已经尝试过Hero小部件，但是它重复相同的屏幕是同一件事，只是图像和文本不同。

列表卡页面

import 'package:flutter/material.dart';
class SlidingCard extends StatelessWidget {
  final String name; //<-- title of the event
  final String date; //<-- date of the event
  final String assetName; //<-- name of the image to be displayed

  const SlidingCard({
    Key key,
    @required this.name,
    @required this.date,
    @required this.assetName,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.only(left: 8, right: 8, bottom: 24),
      elevation: 8,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(32)), //<--custom shape
      child: Column(
        children: <Widget>[
          ClipRRect(  //<--clipping image
            borderRadius: BorderRadius.vertical(top: Radius.circular(32)),
            child: Image.asset( //<-- main image
              'lib/assets/$assetName',
              height: MediaQuery.of(context).size.height * 0.35,
              width: 500,
              fit: BoxFit.cover,
            ),
          ),
          SizedBox(height: 8),
          Expanded(
            child: CardContent(
              name: name,
              date :date,
            ), //<-- will be replaced soon :)
          ),
        ],
      ),
    );
  }
}

class CardContent extends StatelessWidget {
  final String name;
  final String date;

  const CardContent({Key key, @required this.name, @required this.date})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(name, style: TextStyle(fontSize: 20)),
          SizedBox(height: 8),
          Text(date, style: TextStyle(color: Colors.grey)),
          Spacer(),
          //SizedBox(width: 30),
          Row(
            children: <Widget>[
              RaisedButton(
                color: Color(0xFF162A49),
                child: Text('VER PRODUCTOS'),
                textColor: Colors.white,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(32),
                ),
                onPressed: () {print("Hello");}, //<-- I want this button to allow each card to navigate to a different activity
              ),
              SizedBox(width: 4),
              Icon( Icons.visibility),
              SizedBox(width: 16),
            ],
          )
        ],
      ),
    );
  }
}

页面卡

import 'package:flutter/material.dart';
import 'package:pt_nisira_app/controller/cards_ex.dart';

class pagePay extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(58, 66, 86, 1.0),
      body: Center(
          child : Padding(
            padding: const EdgeInsets.only(top:15.0),
            child: SlidingCardsView(),
          ),
      ),
    );
  }
}
class SlidingCardsView extends StatefulWidget {
  @override
  _SlidingCardsViewState createState() => _SlidingCardsViewState();
}

class _SlidingCardsViewState extends State<SlidingCardsView> {

  PageController pageController;

  @override
  void initState() {
    super.initState();
    pageController = PageController(viewportFraction: 0.8);
  }

  @override
  void dispose() {
    pageController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 350,
      height: MediaQuery.of(context).size.height * 0.65,  //<-- set height of the card
      child: PageView(
        controller: pageController,
        children: <Widget>[
          SlidingCard(
            name: 'CATALAGO DE GASEOSAS',
            date: '4.20-30',
            assetName: 'bebidas_gaseosas.jpg',
          ),
          SlidingCard(
            name: 'CATALAGO DE GOLOSINAS',
            date: '4.28-31',
            assetName: 'golosinas_productos.jpg',
          ),
          SlidingCard(
            name: 'CATALAGO DE LACTEOS',
            date: '4.28-31',
            assetName: 'lacteos_productos.jpg',
          ),
          SlidingCard(
            name: 'CATALAGO DE PRODUCTOS DE COCINA',
            date: '4.28-31',
            assetName: 'cocina_productos.jpg',
          ),
        ],
      ),
    );
  }
}

我希望每个页面都可以自定义

Answer 1

首先，您应创建以下路线列表：     final routes = ['/FirstPage', '/SecondPage']; 然后，在列表项的onTap（）上：     Navigator.pushNamed(context, routes[index]);

Answer 2

您可以将activity道具传递给SlidingCard。

 SlidingCard(
    name: 'CATALAGO DE GOLOSINAS',
    date: '4.28-31',
    assetName: 'golosinas_productos.jpg',
    activity: () {
        print('do some acitivity');
    }
),
 SlidingCard(
    name: 'CATALAGO DE GOLOSINAS',
    date: '4.28-31',
    assetName: 'golosinas_productos.jpg',
    activity: () {
        print('do some another acitivity');
    }
),

并在您的CardContent小部件中：

RaisedButton(
      color: Color(0xFF162A49),
      child: Text('VER PRODUCTOS'),
      textColor: Colors.white,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(32),
      ),
     onPressed: () {
        activity(); // pass your acitivity prop from top level widget to CardContent widget and call it on the RaisedButton;
      },
),