Flutter 在按钮点击的另一个屏幕上添加卡片小部件

Question

我正在开发一个应用程序，当用户在探索屏幕上选择卡片时，我想在主屏幕上添加一些卡片小部件。 由于我是 flutter 的新手，我需要一些代码方面的帮助。

就像它会添加收藏夹或书签功能一样。 如果您想查看完整代码，这里是 github 的链接： https://github.com/Ankitkj1999/study_lpu/tree/mark_feature explore.ZBB14127678960FAE97D8

import 'package:flutter/material.dart';

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return ListViewHome();
  }
}

class ListViewHome extends StatelessWidget {
  final titles = ["List 1", "List 2", "List 3", "List 4"];
  final subtitles = [
    "Here is list 1 subtitle",
    "Here is list 2 subtitle",
    "Here is list 3 subtitle",
    "Here is list 4 subtitle"
  ];
  // final icons = [
  //   // IconButton(onPressed: () {}, icon: const Icon(Icons.add)),
  //   // Icons.access_alarm,
  //   // Icons.access_time,
  //   Icons.add
  // ];

  ListViewHome({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: titles.length,
        itemBuilder: (context, index) {
          return Card(
            child: ListTile(
              title: Text(titles[index]),
              subtitle: Text(subtitles[index]),
              leading: const CircleAvatar(
                  backgroundImage: NetworkImage(
                      "https://images.unsplash.com/photo-1547721064-da6cfb341d50")),
              trailing: IconButton(
                onPressed: () {},
                icon: const Icon(Icons.add),
              ),
            ),
          );
        });
  }
}

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

  @override
  Widget build(BuildContext context) {
    showWidget() {
      return const Scaffold(
        body: Center(
          child: Text('Home'),
        ),
      );
    }

    return showWidget();
  }
}

主页.dart

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:study_lpu/explore.dart';
import 'package:study_lpu/fav.dart';
import 'login.dart';
import 'explore.dart';

// bottom navigation tutorial https://blog.logrocket.com/how-to-build-a-bottom-navigation-bar-in-flutter/
class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

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

class _HomeState extends State<Home> {
  late String uid;
  int _selectedIndex = 0;

  static const List<Widget> _pages = <Widget>[
    // Scaffold(
    //   body: Center(
    //     child: Text('Hot'),
    //   ),
    // ),
    pushAdd(),
    ExploreScreen(),
    RandWords(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Home'),
          actions: [
            IconButton(
              icon: const Icon(Icons.logout),
              onPressed: () async {
                await FirebaseAuth.instance.signOut();
                Navigator.pushAndRemoveUntil(
                    context,
                    MaterialPageRoute(
                        builder: (context) => const LoginScreen()),
                    (route) => false);
              },
            )
          ],
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home_outlined),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.book_outlined),
              label: 'Explore',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person_outlined),
              label: 'Profile',
            )
          ],
          currentIndex: _selectedIndex,
          onTap: _onItemTapped,
        ),
        body:
            // Center(
            //   // child: Text(uid),
            //   child: _pages.elementAt(_selectedIndex),
            // ),
            IndexedStack(
          index: _selectedIndex,
          children: _pages,
        ));
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    uid = FirebaseAuth.instance.currentUser!.uid;
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
}

Answer 1

以下是如何在不使用任何提供程序的情况下以基本方式做到这一点。 首先，您需要将数据放入 model 以正确访问变量。 其次，在主页中，我定义了一个空的 model 列表，还定义了一个 function 将卡片添加到在探索页面执行的列表中。 您还需要在主页中查看以将添加的卡片显示到列表中

 import 'package:firebase_auth/firebase_auth.dart';
    import 'package:flutter/material.dart';
    import 'package:study_lpu/explore.dart';
    import 'package:study_lpu/fav.dart';
    import 'login.dart';
    import 'explore.dart';
    

    class MyCardModel{
       String title;
       String subTitle;
       String leadingImage;

       MyCardModel(String title, String subTitle, String leadingImage) {
        this.title = title;
        this.subTitle = subTitle;
        this.leadingImage = leadingImage;
     }

    }
    class Home extends StatefulWidget {
      const Home({Key? key}) : super(key: key);
    
      @override
      _HomeState createState() => _HomeState();
    }
    
    class _HomeState extends State<Home> {
      late String uid;
      int _selectedIndex = 0;
      List<MyCardModel> listOfCard = [];

      void addCardToListMethod(MyCardModel card){
          setState((){
             listOfCard.add(card);
             })      
}
      static const List<Widget> _pages = <Widget>[
        // Scaffold(
        //   body: Center(
        //     child: Text('Hot'),
        //   ),
        // ),
        pushAdd(),
        ExploreScreen(addCardToListMethod: addCardToListMethod),
        RandWords(),
      ];
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              title: const Text('Home'),
              actions: [
                IconButton(
                  icon: const Icon(Icons.logout),
                  onPressed: () async {
                    await FirebaseAuth.instance.signOut();
                    Navigator.pushAndRemoveUntil(
                        context,
                        MaterialPageRoute(
                            builder: (context) => const LoginScreen()),
                        (route) => false);
                  },
                )
              ],
            ),
            bottomNavigationBar: BottomNavigationBar(
              items: const <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                  icon: Icon(Icons.home_outlined),
                  label: 'Home',
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.book_outlined),
                  label: 'Explore',
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.person_outlined),
                  label: 'Profile',
                )
              ],
              currentIndex: _selectedIndex,
              onTap: _onItemTapped,
            ),
            body:
                // Center(
                //   // child: Text(uid),
                //   child: _pages.elementAt(_selectedIndex),
                // ),
                IndexedStack(
              index: _selectedIndex,
              children: _pages,
            ));
      }
    
      @override
      void initState() {
        // TODO: implement initState
        super.initState();
        uid = FirebaseAuth.instance.currentUser!.uid;
      }
    
      void _onItemTapped(int index) {
        setState(() {
          _selectedIndex = index;
        });
      }
    }








import 'package:flutter/material.dart';

class ExploreScreen extends StatelessWidget {
  Function addCardToListMethod;
  const ExploreScreen({Key? key, this.addCardToListMethod}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return ListViewHome();
  }
}

class ListViewHome extends StatelessWidget {

  List<MyCardModel> myCardList = [
      MyCardModel(
               title: "List1",
               subtitle: "here is list 1 subtitle",
               leadingImage: "https://images.unsplash.com/photo-1547721064-da6cfb341d50" ),
         MyCardModel(
               title: "List1",
               subtitle: "here is list 1 subtitle",
               leadingImage: "https://images.unsplash.com/photo-1547721064- 
          da6cfb341d50" )
 ];
  // final icons = [
  //   // IconButton(onPressed: () {}, icon: const Icon(Icons.add)),
  //   // Icons.access_alarm,
  //   // Icons.access_time,
  //   Icons.add
  // ];

  ListViewHome({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: myCardList.length,
        itemBuilder: (context, index) {
          return Card(
            child: ListTile(
              title: Text(myCardList[index].title),
              subtitle: Text(myCardList[index].subtitle),
              leading: const CircleAvatar(
                  backgroundImage: NetworkImage(
                      myCardList[index].leadingImage)),
              trailing: IconButton(
                onPressed: () {
                      widget.addCardToListMethod(myCardList[index])},
                icon: const Icon(Icons.add),
              ),
            ),
          );
        });
  }
}