我在GridView.builder中有墨水池,问题是,我想在用户单击它时选择和取消选择特定的墨水池。我已经实现了一些功能,但我的代码的问题是,当用户单击单个墨水池时,它会改变gridview.builder中所有墨水池的颜色。我的代码是:
import 'package:chef/constants/resources.dart';
import 'package:chef/constants/strings.dart';
import 'package:chef/helpers/color_helper.dart';
import 'package:chef/models/schedule_response_model.dart';
import 'package:chef/screens/experience/schedule/create_schedule_viewmodel.dart';
import 'package:chef/theme/app_theme_data/app_theme_data.dart';
import 'package:chef/theme/app_theme_widget.dart';
import 'package:chef/ui_kit/widgets/general_button.dart';
import 'package:chef/ui_kit/widgets/general_text.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'dart:developer' as developer;
class EditScheduleScreen extends StatefulWidget {
EditScheduleScreen({required this.daysGroups, required this.scheduleScreenViewModel});
DaysGroups? daysGroups ;
final ScheduleScreenViewModel? scheduleScreenViewModel;
@override
State<EditScheduleScreen> createState() => _EditScheduleScreenState();
}
class _EditScheduleScreenState extends State<EditScheduleScreen> {
@override
void initState() {
// TODO: implement initState
print('the day and hour schedule are.......................................\n${widget.daysGroups}');
super.initState();
}
bool showSelectedTime = false;
@override
Widget build(BuildContext context) {
final appTheme = AppTheme.of(context).theme;
return Scaffold(
backgroundColor: HexColor.fromHex("#212129"),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
floatingActionButton: okButtonTitle(appTheme: appTheme),
//bottomNavigationBar: okButtonTitle(appTheme: appTheme),
body: Column(children: [
Container(
height: 218,
width: double.infinity,
child: Image.asset(Resources.expHeaderBGPNG),
),
const SizedBox(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(left: 29),
child: GeneralText(
Strings.editYourScheduleLabel,
style: appTheme.typographies.interFontFamily.headline6
.copyWith(
fontSize: 24, color: HexColor.fromHex('#ffffff')),
),
),
],
),
Container(
margin: const EdgeInsetsDirectional.only(top:40, bottom: 40, start:40, ),
// decoration: BoxDecoration(
// color: Colors.pinkAccent,//HexColor.fromHex('#2b2b33'),
// ),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
flex: 1,
child: Padding(
padding: const EdgeInsets.only(top: 12.0),
child: Column(
children: [
GeneralText( "day of the week",
style: appTheme
.typographies.interFontFamily.headline6
.copyWith(
color: HexColor.fromHex('#f1c452'),
fontSize: 14,
fontWeight: FontWeight.w700)),
GeneralText( '${widget.daysGroups?.dayOfMonth}',
style: appTheme
.typographies.interFontFamily.headline2
.copyWith(
color: HexColor.fromHex('#909094'),
fontSize: 40,
))
]),
),
),
Flexible(
flex: 4,
child: Container(
//width: 600,
height:300,
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color:
//Colors.red,
HexColor.fromHex('#2b2b33'),
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(20),
bottomLeft: Radius.circular(20))),
child:
GridView.builder(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 70, // Adjust the cross-axis extent as needed
mainAxisSpacing: 10,
crossAxisSpacing: 10,
//childAspectRatio: 1,
),
itemCount: widget.daysGroups?.hours?.length, // Replace with the number of items you want in your grid
itemBuilder: (BuildContext context, int index) {
return InkWell(
onTap: (){
setState(() {
print(index);
int scheduleId = widget.daysGroups?.hours?[index].scheduleId ?? 0;
if (showSelectedTime ==false){
widget.scheduleScreenViewModel?.scheduleIds.add(scheduleId);
print(widget.scheduleScreenViewModel?.scheduleIds);
showSelectedTime = true;
}
else{
widget.scheduleScreenViewModel?.scheduleIds.remove(scheduleId);
print(widget.scheduleScreenViewModel?.scheduleIds);
showSelectedTime = false;
}
//showSelectedTime =true;
});
},
child: Column(
children: [
Container(
decoration: BoxDecoration(
border: Border.all(
color: HexColor.fromHex('#f1c452'),
),
color: showSelectedTime
? HexColor.fromHex('#f1c452')
: HexColor.fromHex('#2b2b33'),
borderRadius: BorderRadius.circular(10),
),
padding: const EdgeInsetsDirectional.symmetric(horizontal: 2, vertical: 10),
//margin: const EdgeInsetsDirectional.all(2),
child: Center(
child: GeneralText(
'${widget.daysGroups?.hours?[index].hourOfDay}',
style: appTheme.typographies.interFontFamily.headline6.copyWith(
color: showSelectedTime
? HexColor.fromHex('#212129')
: HexColor.fromHex('#f1c452'),
fontSize: 14,
),
),
),
),
SizedBox(
width: 40,
//mainAxisAlignment : MainAxisAlignment.center,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Image.asset(
Resources.userProfilePicIcon,
width: 10,
height: 12,
),
SizedBox(width: 5),
Text(
'${widget.daysGroups?.hours?[index].openCapacity}',
style: TextStyle(
fontSize: 14,color: HexColor.fromHex('#909094'),
),
),
],
),
),
],
),
);
},
)
),
),
],
),
),
]),
);
}
Widget okButtonTitle({required IAppThemeData appTheme}) {
return Container(
padding: EdgeInsets.only(bottom: 50),
width: 160,
child: GeneralButton.button(
//isEnable: false,
title: Strings.okButtonTitle.toUpperCase(),
styleType: ButtonStyleType.fill,
onTap: () {
// viewModel.goToForgotPasswordScreen();
Navigator.of(context).pop();
setState(() {
});
},
),
);
}
}
1条答案
按热度按时间2j4z5cfb1#
控制视图是否被选中的变量是
showSelectedTime
,但您将它用于所有视图。最简单的解决方案是为它设置单独的值,就像一个布尔值列表。要做到这一点,你可以初始化布尔值列表:然后在
GridView.builder
中将showSelectedTime =
替换为showSelectedTime[index] =
,因为您只想更新该特定视图的true/false值。