Flutter中如何自定义列表视图的各个界面？答案

【问题标题】：How can I customize each interface of a list view in Flutter?Flutter中如何自定义列表视图的各个界面？
【发布时间】：2019-06-27 02:03:20
【问题描述】：

我正在开发一个产品目录，有一个List of Cards，每张卡片都有一个按钮，但是当我按下它时，所有卡片都将我引导到同一个活动，我怎么能制作我去的每张卡片一个不同的活动，并以我的方式进行了修改。

我已经尝试过 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',
          ),
        ],
      ),
    );
  }
}

我想定制每个页面

【问题讨论】：

当您传递其他参数时，您还可以将函数传递给 SlidingCard 然后 CardContent 并将该函数设置为 onPressed 事件上的凸起按钮。
帮我写代码：D 谢谢

标签： android android-studio flutter

【解决方案1】：

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

【讨论】：

@Jefferson Santos Angulo 检查这个答案

【解决方案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;
      },
),

【讨论】：