在我的 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 应用程序中单击容器时更改容器的颜色 的相关文章

随机推荐

  • 在 EF Core 中编写不区分大小写的搜索查询?

    我想问一个关于 SQL Server 和 EF Core 的问题 数据库中的排序规则是Latin1 CI AS我想编写一个包含土耳其字符的搜索查询 在数据库中 人员 表中有一条名为 SEL M 的记录 当我在 EF Core 中编写这样的查
  • html5视频上的圆角

    有没有办法使用 CSS3 border radius 属性截掉 html5 视频元素的角 查看这个例子 http jsfiddle net inquisitive web developer vDPW2 它不起作用 创建一个带有圆角和溢出
  • 创建 32 位计数器时出现全局变量问题

    我正在尝试做正交解码 using 爱特梅尔 Xmega AVR微控制器 Xmega只有16 bit柜台 另外 我已经用完了所有可用的计时器 现在要做32 bit柜台我用过一个16 bit柜台并在其over under flow interr
  • VB.NET 中的下拉菜单

    我有一个小要求 那就是 表单上有两个组合框 用于填充员工姓名和角色 我按如下方式填充组合框 我创建了一个名为 DbConnect 的类 其中有 02 个函数 Public Function getEmployees As DataTable
  • 如何在 WPF 和 ASP.NET MVC 应用程序之间共享最多的代码?

    我可以使用什么架构和模式在 WPF 和 ASP NET MVC 应用程序之间共享最多的模型和逻辑代码 我试图在这里实现更多目标 而不仅仅是将我的数据实体与两个演示项目分开 还有很多共同点 例如关于在什么条件下显示什么 何时需要某些内容等的
  • 如何使用 XSL 在 Mozilla 中显示。

    我怎样才能显示 nbsp 在 Mozilla 中使用 XSL 我尝试过 CDATA 但没有成功 我使用的是火狐浏览器3 5 5 因为您无法将 HTML 字符实体直接放入 XSLT 源中 除了 lt gt apos quot and amp
  • Android 浏览器报告屏幕尺寸错误?

    我正在开发一个移动网站 我遇到了一个有趣的问题 我正在我的台式机以及我的 Motorola Droid Android 2 2 上进行测试 我设置了媒体查询来加载 3 个不同的样式表 320 像素宽 480 像素宽和 640 像素宽 我注意
  • 使用会话 ID 将消息添加到 IAsyncCollector 主题输出

    目前是否可以将消息推送到 Azure 函数的 IAsyncCollector 主题输出并设置会话 ID 我的主题实际上是关于 FIFO 排序的 所以我们必须设置会话 因此 我们设想只设置一个 Guid 作为唯一的会话 ID 我知道如何通过此
  • 显示MJPEG流的跨浏览器解决方案

    有没有一种轻量级 免费且可靠的方式在跨浏览器环境中显示 MJPEG 我正在尝试显示来自轴2120 http www axis com techsup cam servers cam 2120 index htm我正在开发的网站上有 IP 摄
  • 如何在 Guice 中定义方法拦截器的顺序?

    有时需要知道 Guice 中拦截方法调用的方法拦截器的顺序 一个简单的示例场景是使用 guice persist 提供的 Transactional 方法拦截器和自定义 Retry 方法拦截器 重试拦截器必须在事务拦截器外部运行 以确保重试
  • 操作 Symfony Intl 提供的国家列表和表单选择类型

    抛开政治不谈 我需要提供Kosovo作为选择国家时的形式选择 使用 Symfony 的内置表单选择类型执行此操作的最优雅的方法是什么country 同时还提供翻译Kosovo name 这是我到目前为止所做的事情 它有效 但我担心这可能有点
  • JPA 2 - 外键仅包含复合主键中的一个字段?

    我在 JPA 2 Hibernate 中获取复合主键和外键时遇到问题 我正在尝试创建一个包含国家和省份的简单场景 国家实体 Entity Table name country public class Country extends Dom
  • 版本变更jquery错误

    大家好 我使用 asp 构建了一个 Web 应用程序 其中包含一点来自 bootstap 的 jquery boorstrap dropdown js 对于其他一些比我开发的项目版本更低的项目 我将版本从4更改为3 5 现在我收到错误 Mi
  • 错误:无法计算表达式,因为代码已优化

    我的 asp net 应用程序中出现错误 内容如下 无法计算表达式 因为代码已优化或本机框架位于调用堆栈的顶部 protected void btnCustomerProfile Click object sender EventArgs
  • “: ${foo=value}”中冒号运算符的解释

    我理解 bash 中的冒号运算符的作用类似于a null http devmanual gentoo org tools reference bash index html multiple selection 我知道它用在参数扩展 htt
  • Android (ActionBarSherlock) 有什么方法可以在纵向和横向上保持相同的 ActionBar 高度吗?

    最近几天我一直在使用 ActionBar 和 ActionBarSherlock 在 ActionBar 中填写一些信息时遇到一些问题 当应用程序以纵向模式运行时 ActionBar看起来不错 并且可以显示所有数据 例如 但是当我将应用程序
  • 获取 Android 音乐播放器的专辑封面

    我想知道如何在音乐播放器中返回专辑封面的图像的代码 函数 你能解释一下我应该传递哪些参数吗 我可以将文件路径传递给该函数 imported required libraries public class SongsManager SDCar
  • 未定义拖放区

    我对 JavaScript 还很陌生 这让我发疯 我想使用 Dropzone js 因此我从以下位置下载了文件 dropzone jshere https raw githubusercontent com enyo dropzone ma
  • 使用图像的java自定义形状框架[重复]

    这个问题在这里已经有答案了 我喜欢创建一个像这个图像一样的java jframe 我已经用不同的形状 如三角形 圆形 多边形和一些疯狂的形状 创建了jframe 但是问题是太难 99 不可能 创建像这个图像的形状 所以我怎样才能制作一个像这
  • 在我的 flutter 应用程序中单击容器时更改容器的颜色

    我通过 API 获取了一些兴趣 数据 并向他们展示了使用未来的构建器作为容器 我想在单击容器时更改容器的背景颜色 这是我所做的 当我单击一个容器时 它会更改所有容器的背景颜色 我在容器的颜色中添加了一个 if 条件来检查它是否被单击 颜色