pierwsza strona

Mam więc tę listtię, którą chciałbym wysłać do innej strony, nazwijmy go "wózkiem" stronie do celów demonstracyjnych. Jest w osobnej funkcji na pierwszej stronie, powyżej budowniczego i wywołana w budowniczym później jako funkcja. Oto kod tego:

return ListTile(
                  trailing: Container(
                    padding: EdgeInsets.only(top: 15.0),
                    child: IconButton(
                        icon: Icon(Icons.add),
                       
                        onPressed: () => MaterialPageRoute(
                              this i am not sure how to access cart page
                              builder: (context) =>
                                  Cart(food.name, food.price),
                            )),
                  ),

Zauważ, jak nie ma nawigatora.

Jest to funkcja wysyłania danych do ekranu "Koszyk" na innej stronie i działa. Problem, który mam, jest to, że chcę mieć również przycisk na Appbar (poniżej w Budowniczym), który po prostu przechodzi na tę stronę bez przekazywania żadnych danych (powyższa ikona powinna przejść tylko na całkowitą stronę, jest to element Listtile na pierwszej stronie .)

Oto kod ikony AppBAR na pierwszej stronie:

return Scaffold( 
appBar: AppBar(
        actions: [
          IconButton(
            icon: Icon(Icons.add_shopping_cart, color: Colors.white),
           
            onPressed: () => print('This needs to lead to cart page.'),
            //I tried doing the Navigator.push route, but it asks for arguments, but I just want
            //to go to the page and not pass any arguments from here
            //this needs to lead to cart page
          ),
        ],)

Strona

Jest to strona "Koszyk", w którym dane powinny być wciśnięte, najlepiej, że chciałbym tylko, aby element Listtile został dodany do koszyka jako płytki listy tak jak na stronie 1 na stronie 1.

 class Cart extends StatefulWidget {
  
  
  final String foodName;
  final String foodPrice;
  Cart(this.foodName, this.foodPrice);

  @override
  _CartState createState() => _CartState();
}

class _CartState extends State<Cart> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cart'),
        centerTitle: true,
      ),
      body: Center(
          child: Container(
              child: Text('${widget.foodName}, ${widget.foodPrice}'))),
    );
  }
}

Problem polega na tym, że chcę mieć różne opcje żywności, a czasami dodać na przykład "żywność. Oto moja fantastyczna demonstracja farby na ten temat.

enter image description here

0
arbiter 21 listopad 2020, 09:30

1 odpowiedź

Najlepsza odpowiedź

Powinieneś użyć tego pakietu zarządzania stanem. Dostawca, bloc, Redux itp. Gdy użytkownik naciśnij przycisk Dodaj. Możesz dodać dane do głównego źródła i powiadomić słuchaczom tym pakietem. Tutaj przykład z pakietem dostawcy:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class CartItemsModel extends ChangeNotifier {
  List<String> _cartItems = [];

  List<String> get cartItems => _cartItems;

  addCartItem(String item) {
    _cartItems.add(item);
    notifyListeners();
  }
}

class MainPage extends StatelessWidget {
  const MainPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Provider(
      create: (c) => CartItemsModel(),
      child: MaterialApp(
        home: Consumer<CartItemsModel>(
          builder: (c, model, _) => Scaffold(
            appBar: AppBar(
              actions: [
                IconButton(
                  icon: Column(
                    children: [
                      Icon(Icons.add_shopping_cart_rounded),
                      Text('added items' + model.cartItems.length.toString()),
                    ],
                  ),
                  onPressed: () {
                    Navigator.of(context).push(MaterialPageRoute(
                      builder: (c) => SecondPage(),
                    ));
                  },
                ),
              ],
            ),
            body: Column(
              children: [
                Text('CartItems Length:' + model.cartItems.length.toString()),
                RaisedButton(
                  onPressed: () {
                    model.addCartItem('Example Cart Item');
                  },
                  child: Text('ADD ITEM'),
                ),
                RaisedButton(
                  onPressed: () {
                    Navigator.of(context).push(MaterialPageRoute(
                      builder: (c) => SecondPage(),
                    ));
                  },
                  child: Text('Go another page'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  const SecondPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Consumer<CartItemsModel>(
      builder: (c, model, _) => Scaffold(
        body: Column(
          children: model.cartItems
              .map((e) => ListTile(
                    title: Text(e),
                  ))
              .toList(),
        ),
      ),
    );
  }
}

Uruchom tę aplikację w swojej głównej funkcji i zobacz, jak działa. Po naciśnięciu przycisku Dodaj element dodać "Przykładowy koszyk element" do listy, która jest w klasie dostawcy, a klasa dostawcy powiadomi inni słuchacz, aby zaktualizować swój stan. Po więcej informacji: https://pub.dev/packages/provider

1
Onur 21 listopad 2020, 07:23