Как я могу настроить каждый интерфейс представления списка во Flutter? - PullRequest
2 голосов
/ 27 июня 2019

Я разрабатываю каталог продуктов, с List of Cards, у каждой Карты есть кнопка, но когда я нажимаю ее, все Карты направляют меня к одному и тому же занятию, как я могу сделать каждую карту, на которую я пошелдругой вид деятельности и изменил его по-своему.

Я пробовал виджет Hero, но это то же самое, что он повторяет один и тот же экран, только с другим изображением и текстом.

Interface of Aplication

Interface of Aplication

СТРАНИЦА КАРТЫ СПИСКА

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',
          ),
        ],
      ),
    );
  }
}

Мне бы хотелось, чтобы каждая страницабыть настроенным

Ответы [ 2 ]

2 голосов
/ 27 июня 2019

Сначала вы должны создать список маршрутов в виде: final routes = ['/FirstPage', '/SecondPage']; Затем onTap () элемента списка: Navigator.pushNamed(context, routes[index]);

0 голосов
/ 27 июня 2019

вы можете передать 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;
      },
),
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...