android - Flutter如何自定义 ListView 的各个界面？

Question

我正在开发一个产品目录，有一个卡片列表，每张卡片都有一个按钮，但是当我按下它时，所有的卡片都将我引导到同一个 Activity ，怎么可能我制作了我参加过不同 Activity 的每张卡片，并按照我的方式对其进行了修改。

我试过 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

首先，您应该创建一个路由列表: 最终路线 = ['/FirstPage', '/SecondPage'];然后，在列表项的 onTap() 上: Navigator.pushNamed(context, routes[index]);