Flutter listTile点击修改背景颜色(不刷新界面)

本文介绍了如何在Flutter中实现ListTile点击后改变背景颜色,而无需调用setState刷新整个界面。通过使用监听和ValueListenableBuilder,可以只更新被点击的ListTile状态,达到局部更新的效果。
摘要由CSDN通过智能技术生成

通常情况下Flutter对于界面内元素状态的改变需要调用setstate来刷新界面,那有没有办法只修改指定元素的状态,这里提供一种方法,以ListTile为例,

创建监听监听ListTile的点击状态,当监听值发生改变调用ValueListenableBuilder来重构该元素,实现点击后该变该元素状态。效果如下:

 具体代码实现如下:

  Widget selectFolders() {
    ValueNotifier<List<bool>> isClicked =
        ValueNotifier([true, false, false, false]);
    return Container(
      width: 300,
      height: 210,
      constraints: BoxConstraints(maxHeight: 180),
      decoration: BoxDecoration(
          border: Border.all(width: 0.1, color: Colors.black),
          color: Colors.white),
      child: Material(
        child: ListView(
          children: [
            ValueListe
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flutter ListTile是一个常用的UI组件,用于在列表中展示相关信息。它提供了一个整洁的外观和常见的交互模式,使得在Flutter应用中显示列表变得简单。 ListTile通常用于在FlutterListView或GridView中展示每个列表。它可以显示标题、副标题、前置图标、后置图标等内容。 在使用ListTile时,你可以设置以下属性: 1. title:列表的主要内容,通常是一个Text或RichText组件。 2. subtitle:列表的副标题,通常是一个Text或RichText组件。 3. leading:列表的前置图标,通常是一个Icon或Image组件。 4. trailing:列表的后置图标,通常是一个Icon或Image组件。 5. onTap:点击列表时触发的回调函数。 除了以上属性,ListTile还有其他一些属性可以用来自定义样式,例如字体大小、颜色、边距等。 以下是一个使用ListTile的示例代码: ```dart ListView( children: <Widget>[ ListTile( leading: Icon(Icons.person), title: Text('John Doe'), subtitle: Text('Software Engineer'), trailing: Icon(Icons.arrow_forward), onTap: () { // 处理点击事件 }, ), ListTile( leading: Icon(Icons.person), title: Text('Jane Smith'), subtitle: Text('UI Designer'), trailing: Icon(Icons.arrow_forward), onTap: () { // 处理点击事件 }, ), // 其他列表... ], ) ``` 这段代码创建了一个包含两个ListTileListView,每个ListTile代表一个人员信息,包括姓名、职位等内容。你可以根据自己的需求进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值