flutter 有问题,以添加最喜爱的按钮上的图书详细信息页面,用户可以点击和更改图标

hec6srdp  于 2023-05-23  发布在  Flutter
关注(0)|答案(1)|浏览(204)

我有一本书的详细信息页面,我想显示一个最喜欢的按钮,用户将点击和最喜欢的按钮将改变它的图标。但我找不到任何方法来做到这一点。我正在使用提供程序进行状态管理。
这是我的主.dart文件

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

import './screens/home_screen.dart';
import './providers/book_list_provider.dart';
import './screens/book_detail_screen.dart';
import './providers/book_provider.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        
        ChangeNotifierProvider(
          create: (context) => BookListProvider(),
        ),

      ],
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter Demo',
        home: HomeScreen(),
        initialRoute: '/home',
        routes: {
          '/home': (context) => HomeScreen(),
          BookDetailScreen.routeName: (context) => BookDetailScreen(),
        },
        onGenerateRoute: (settings) {
          return MaterialPageRoute(builder: (context) => HomeScreen());
        },
        onUnknownRoute: (settings) {
          return MaterialPageRoute(builder: (context) => HomeScreen());
        },
      ),
    );
  }
}

在主屏幕上,我有一个标签,在那里我根据类别对书籍进行分类,之后我会显示一个趋势书籍列表。从任何地方,用户都可以点击图书图像并查看图书详细信息页面,用户可以将该图书标记为收藏夹。
主屏幕图像

这是我的书的详细页代码

import 'package:flutter_svg/svg.dart';
import 'package:provider/provider.dart';

import '../constants/color_constant.dart';
import 'package:flutter/material.dart';
import '../providers/book_list_provider.dart';
import '../providers/book_provider.dart';

class BookDetailScreen extends StatelessWidget {
  static String routeName = '/bookDetails';
  @override
  Widget build(BuildContext context) {
    final bookId = ModalRoute.of(context)!.settings.arguments as String;
    final bookDetails = Provider.of<BookListProvider>(context, listen: false)
        .getItemById(bookId);
    final bookItemProvider = Provider.of<BookItem>(context);
    return Scaffold(
      body: SafeArea(
        child: Container(
          child: CustomScrollView(
            slivers: [
              SliverAppBar(
                automaticallyImplyLeading: false,
                backgroundColor: kMainColor,
                expandedHeight: MediaQuery.of(context).size.height * 0.5,
                flexibleSpace: Container(
                  height: MediaQuery.of(context).size.height * 0.5,
                  child: Stack(
                    children: [
                      Positioned(
                        left: 25,
                        top: 35,
                        child: GestureDetector(
                          onTap: () {
                            if (Navigator.of(context).canPop()) {
                              Navigator.of(context).pop();
                            } else {
                              print('I am hero');
                              Navigator.of(context).pushNamedAndRemoveUntil(
                                  '/home', (route) => false);
                            }
                          },
                          child: Container(
                            width: 32,
                            height: 32,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(5),
                              color: kWhiteColor,
                            ),
                            child: SvgPicture.asset(
                              'assets/icons/icon_back_arrow.svg',
                            ),
                          ),
                        ),
                      ),
                      Positioned(
                        right: 25,
                        top: 35,
                        child: GestureDetector(
                          onTap: () {
                            print('User tapped the icon');
                          },
                          child: Container(
                            width: 32,
                            height: 32,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(5),
                              color: kWhiteColor,
                            ),
                            child: bookDetails.isFavourite
                                ? const Icon(Icons.favorite)
                                : const Icon(Icons.favorite_border_outlined),
                          ),
                        ),
                      ),
                      Align(
                        alignment: Alignment.bottomCenter,
                        child: Container(
                            margin: const EdgeInsets.only(bottom: 62),
                            width: 170,
                            height: 225,
                            child: ClipRRect(
                              borderRadius: const BorderRadius.only(
                                topLeft: Radius.circular(10),
                                topRight: Radius.circular(10),
                              ),
                              child: Image.network(
                                bookDetails.imageUrl,
                                fit: BoxFit.cover,
                              ),
                            )),
                      ),
                    ],
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

和我的BookItem提供程序代码

import 'package:flutter/widgets.dart';

enum Categories {
  education,
  fiction,
  nonfiction,
}

class BookItem extends ChangeNotifier {
  final String id;
  final String title;
  final int amount;
  final int quantity;
  bool isFavourite = false;
  final String description;
  final String authorName;
  final Categories category;
  final String imageUrl;
  final int bookSold;
  BookItem({
    required this.id,
    required this.title,
    required this.authorName,
    required this.amount,
    required this.description,
    required this.quantity,
    required this.category,
    required this.imageUrl,
    required this.bookSold,
  });

  void isFavouriteToggle() {
    isFavourite = !isFavourite;
    notifyListeners();
  }
}

我尝试过谷歌的解决方案,但没有工作。我很抱歉,如果这是一个愚蠢的问题。

zlwx9yxi

zlwx9yxi1#

将图书详细信息页面更改为:类BookDetailScreen扩展StatefulWidget
对于单击statelessWidget,黄色led将显示单击箭头并选择StatefulWidget
之后,当人点击按钮改变书收藏保存为正常,并添加一个

setState(() {

注意更改值也在图书详细信息页//code });
显示在屏幕上
因为statelessWidget是静态的,不能在进程中更改,但StatefulWidget可以使用setState
希望回答你的问题

相关问题