我有一本书的详细信息页面,我想显示一个最喜欢的按钮,用户将点击和最喜欢的按钮将改变它的图标。但我找不到任何方法来做到这一点。我正在使用提供程序进行状态管理。
这是我的主.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();
}
}
我尝试过谷歌的解决方案,但没有工作。我很抱歉,如果这是一个愚蠢的问题。
1条答案
按热度按时间zlwx9yxi1#
将图书详细信息页面更改为:类BookDetailScreen扩展StatefulWidget
对于单击statelessWidget,黄色led将显示单击箭头并选择StatefulWidget
之后,当人点击按钮改变书收藏保存为正常,并添加一个
注意更改值也在图书详细信息页//code });
显示在屏幕上
因为statelessWidget是静态的,不能在进程中更改,但StatefulWidget可以使用setState
希望回答你的问题