在我的 flutter 应用程序中单击容器时更改容器的颜色

2024-04-26

我通过 API 获取了一些兴趣(数据),并向他们展示了使用未来的构建器作为容器。我想在单击容器时更改容器的背景颜色。这是我所做的,当我单击一个容器时,它会更改所有容器的背景颜色。

我在容器的颜色中添加了一个 if 条件来检查它是否被单击

颜色:是否被点击?颜色.白色:颜色(0xFFFFEBE7),

并在单击时将 isClicked 状态设置为 true。

bool isClicked = false;

FutureBuilder(
                      future: GetInterests.getInterests(),
                      builder: (context, snapshot) {
                        final datalist = snapshot.data;
                        if (snapshot.connectionState ==
                            ConnectionState.done) {
                          return Expanded(
                            child: SizedBox(
                              height: 35,
                              child: ListView.builder(
                                scrollDirection: Axis.horizontal,
                                itemBuilder: (context, index) {
                                  return Wrap(
                                    direction: Axis.vertical,
                                    children: <Widget>[
                                      GestureDetector(
                                        onTap: (){
                                          final inte_id =  "${datalist[index]['_id']}";
                                          log(inte_id);
                                          
                                          setState(() {
                                            isClicked = true;
                                          });
                                        },
                                        child: new Container(
                                          margin: EdgeInsets.only(right: 7),
                                          height: 30,
                                          width: MediaQuery.of(context)
                                                  .size
                                                  .width /
                                              5.2,
                                          decoration: BoxDecoration(
                                              color: isClicked? Colors.white : Color(0xFFFFEBE7),
                                              border: Border.all(
                                                  color: Color(0xFFE0E0E0)),
                                              borderRadius:
                                                  BorderRadius.only(
                                                      topLeft:
                                                          Radius.circular(
                                                              50.0),
                                                      topRight:
                                                          Radius.circular(
                                                              50.0),
                                                      bottomRight:
                                                          Radius.circular(
                                                              50.0),
                                                      bottomLeft:
                                                          Radius.circular(
                                                              0.0))),
                                          child: Center(
                                            child: Text(
                                              "${datalist[index]['iname']}",
                                              style: TextStyle(
                                                  fontFamily: 'Montserrat',
                                                  color: Color(0xFFFF5E3A),
                                                  fontSize: 13),
                                            ),
                                          ),
                                        ),
                                      ),
                                    ],
                                  );
                                },
                                itemCount: datalist.length,
                              ),
                            ),
                          );
                        }
                        return Padding(
                          padding: const EdgeInsets.only(left: 140.0),
                          child: Center(
                            child: CircularProgressIndicator(),
                          ),
                        );
                      },
                    )

我能够在属于我单击的容器的控制台中打印兴趣 ID。但不知道如何只改变它的颜色


相反,您可以使用变量来存储 selectedIndex 并检查 currentIndex 是否被选择,并比较 currentIndex 是否被选择并设置所选小部件的样式。

   import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}


class MyWidget extends StatefulWidget {

  _MyWidgetState createState()=>_MyWidgetState();

}
class _MyWidgetState extends State<MyWidget>{
  List _selectedIndexs=[];
    @override
  Widget build(BuildContext context) {

    return ListView.builder(
      itemCount: 4,
      itemBuilder: (ctx,i){
        final _isSelected=_selectedIndexs.contains(i);
        return GestureDetector(
          onTap:(){
            setState((){
               if(_isSelected){
                 _selectedIndexs.remove(i);                

               }else{
                 _selectedIndexs.add(i);

               }
            });
          },
          child:Container(
          color:_isSelected?Colors.red:null,
          child:ListTile(title:Text("Khadga")),
        ),
        );
      }
    );

}


}

像我在上面的例子中所做的那样修改你的列表视图构建器。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在我的 flutter 应用程序中单击容器时更改容器的颜色 的相关文章