flutter 更改网格视图按钮的颜色

rdlzhqv9  于 2023-08-07  发布在  Flutter
关注(0)|答案(2)|浏览(156)

this is the output screen now I want to click on any of the button the button colour changes to golden and all are remain same and when I gain click on the button the button comes to its normal colour.How to do that?如果单击其中一个gridview项目,然后按钮改变颜色,如何更改按钮的颜色?但你只能选一件。我该怎么做?
返回脚手架(主体:安全区(儿童:SingleChildScrollView(物理:const BouncingScrollPhysics(),child:列(子项:[容器(高度:MediaQuery.of(context).size.height,width:MediaQuery.of(context).size.width,decoration:BoxDecoration(图片:const DecorationImage(image:AssetImage('assets/images/frame.png'),fit:BoxFit.fill),颜色:AppColors.purewhite),子项:SingleChildScrollView(子项:列(crossAxisAlignment:CrossAxisAlignment.start,子项:[手势检测器(onTap:(){Get.to(GenderScreen());},child:Padding(padding:const EdgeInsets.all(15.0),child:图标(图标.arrow_back_ios_new,颜色:AppColors.textgreen),Column(children:[ const Padding(padding:EdgeInsets.对称(垂直:20),孩子:CustomIcon(svgIcon:'assets/images/fourstep.svg',大小:150))、Row(子项:[填充(填充:const EdgeInsets.only(top:20,左:20),子:Text('Your Interests ',style:logintext),),],),FutureBuilder(future:Get.put(APIService(Dio())).getInterest(token),builder:(context,AsyncSnapshot snapshot){ if(!snapshot.hasData){ if(snapshot.connectionState == ConnectionState.waiting){} if(snapshot.hasError){ return Container(child:public void run();} } // return snapshot.data!.statusCode == 400 //?/容器(/对齐:Alignment.center,/ margin:仅EdgeInsets.(顶部:100),/ child:行(/mainAxisAlignment:MainAxisAlignment.center,/children:[ / Text(“They is no interests”,style:文本样式(颜色:Colors.red),)//]/),/):

return SingleChildScrollView(
                              physics: const BouncingScrollPhysics(),
                              child: Padding(
                                  padding: const EdgeInsets.symmetric(
                                      vertical: 20, horizontal: 10),
                                  child: SizedBox(
                                      height: 120,
                                      child: GridView.builder(
                                          itemCount:
                                              snapshot.data!.data!.length,
                                          scrollDirection: Axis.vertical,
                                          gridDelegate:
                                              const SliverGridDelegateWithFixedCrossAxisCount(
                                                  crossAxisCount: 3,
                                                  childAspectRatio: 4 / 2),
                                          itemBuilder:
                                              (BuildContext context,
                                                  int index) {
                                            Data data =
                                                snapshot.data!.data![index];
                                            id = data.id.toString();
                                            interest = data.interest.toString();
                                            return InkWell(
                                                onTap: () {
                                                  setState(() {

                                                  });
                                                },
                                                // return InkWell(
                                                //   onTap: () {
                                                // setState(() {
                                                //   if (interItem.contains(
                                                //       interestList[index].toString())) {
                                                //     interItem.remove(
                                                //         interestList[index]
                                                //             .toString());
                                                //     if (interId.contains(
                                                //          interestId[index]
                                                //             .toString())) {
                                                //        interId.remove(
                                                //           interestId[index]
                                                //                .toString());
                                                //   } else {
                                                //     interItem.add(
                                                //         interestList[index]
                                                //             .toString());
                                                //   }
                                                // });
                                                // if (interId.contains(
                                                //     interestId[index]
                                                //         .toString())) {
                                                //   interId.remove(
                                                //       interestId[index]
                                                //           .toString());
                                                // } else {
                                                //   interId.add(
                                                //       interestId[index]
                                                //           .toString());
                                                //    }} else {
                                                //    interId.add(
                                                //    interestId[index].toString());
                                                //
                                                //
                                                // }
                                                // print(s);
                                                // print('My Value');
                                                // print(interItem.toString());
                                                // print(interId.toString());
                                                // });
                                                child: Container(
                                                  height: 40,
                                                  width: 50,
                                                  // color: Colors.grey,
                                                  margin: const EdgeInsets
                                                          .symmetric(
                                                      vertical: 10,
                                                      horizontal: 5),
                                                  decoration: BoxDecoration(

                                                          // ? AppColors.golden
                                                          // : AppColors
                                                          // .purewhite,
                                                      border: Border.all(
                                                          color: AppColors
                                                              .golden,
                                                          width: 3),
                                                      borderRadius:
                                                          const BorderRadius
                                                                  .all(
                                                              Radius
                                                                  .circular(
                                                                      20))),

                                                  padding:
                                                      EdgeInsets.all(1),
                                                  child: Center(
                                                    child: Text(
                                                      data.interest.toString(),
                                                      style: TextStyle(
                                                          fontSize: 25),
                                                    ),

                                                    ),

字符串

sqxo8psd

sqxo8psd1#

您可以将所选按钮的索引保存为全局状态,然后更改每个按钮的颜色,并将其与保存的索引进行检查。

ocebsuys

ocebsuys2#

您可以尝试将chips小部件用于此用例。
您可以查看示例here(Flutter文档)。
我试着用你的代码来实现相同的你可以检查出来.

import 'package:flutter/material.dart';

void main() {
runApp(const GreenFrog());
}

enum ExerciseFilter { walking, running, cycling, hiking }

class GreenFrog extends StatefulWidget {
const GreenFrog({super.key});

@override
State<GreenFrog> createState() => _GreenFrogState();
}

class _GreenFrogState extends State<GreenFrog> {
Set<ExerciseFilter> filters = <ExerciseFilter>{};

@override
Widget build(BuildContext context) {
return MaterialApp(
    home: Scaffold(
        body: SafeArea(
            child: SingleChildScrollView(
                physics: const BouncingScrollPhysics(),
                child: Column(children: [
                  Container(
                      height: MediaQuery.of(context).size.height,
                      width: MediaQuery.of(context).size.width,
                      decoration: const BoxDecoration(
                          image: DecorationImage(
                              image: AssetImage('assets/images/frame.png'),
                              fit: BoxFit.fill),
                          color: Colors.white),
                      child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            GestureDetector(
                              onTap: () {},
                              child: const Padding(
                                padding: EdgeInsets.all(15.0),
                                child: Icon(Icons.arrow_back_ios_new,
                                    color: Colors.green),
                              ),
                            ),
                            const Column(children: [
                              Padding(
                                  padding:
                                      EdgeInsets.symmetric(vertical: 20),
                                  child: Icon(Icons.memory)),
                              Row(
                                children: [
                                  Padding(
                                    padding:
                                        EdgeInsets.only(top: 20, left: 20),
                                    child: Text('Your Interests',
                                        style:
                                            TextStyle(color: Colors.red)),
                                  ),
                                ],
                              )
                            ]),
                            SingleChildScrollView(
                                physics: const BouncingScrollPhysics(),
                                child: Padding(
                                    padding: const EdgeInsets.symmetric(
                                        vertical: 20, horizontal: 10),
                                    child: SizedBox(
                                        height: 120,
                                        child: GridView.builder(
                                            itemCount: ExerciseFilter
                                                .values.length,
                                            scrollDirection: Axis.vertical,
                                            gridDelegate:const 
       SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,
                                                 childAspectRatio:4 / 2),
                                            itemBuilder:
                                                (BuildContext context,
                                                    int index) {
//                                             Data data =
//                                                 snapshot.data!.data! 
[index];
//                                             id = data.id.toString();
//                                             interest = 
data.interest.toString();
                                              var interest = ExerciseFilter
                                                  .values
                                                  .elementAt(index);
                                              return FilterChip(
                                                label: Text(interest.name),
                                                selected: filters
                                                    .contains(interest),
                                                onSelected:
                                                    (bool selected) {
                                                  setState(() {
                                                    if (selected) {
                                                      
filters.add(interest);
                                                    } else {
                                                      filters
                                                          
.remove(interest);
                                                    }
                                                  });
                                                },
                                              );
                                            }))))
                          ]))
                ])))));
 }
}

字符串

相关问题