dart gridview中的墨水池,当用户选择或删除单个墨水池时,

9jyewag0  于 2023-09-28  发布在  其他
关注(0)|答案(1)|浏览(87)

我在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(() {

          });
        },
      ),
    );
  }
}
2j4z5cfb

2j4z5cfb1#

控制视图是否被选中的变量是showSelectedTime,但您将它用于所有视图。最简单的解决方案是为它设置单独的值,就像一个布尔值列表。要做到这一点,你可以初始化布尔值列表:

List<bool> showSelectedTime = []
    @override
    void initState() {
      .
      .
      .
        showSelectedTime = List.generate(widget.daysGroups?.hours?.length, (index) => false);
    }

然后在GridView.builder中将showSelectedTime =替换为showSelectedTime[index] =,因为您只想更新该特定视图的true/false值。

相关问题