我想在单击 onTap 时更改作为 ListView 子项的 CustomListTile 的颜色，并将其他子项颜色设置为默认颜色？

Posted 2023-02-23

【中文标题】我想在单击 onTap 时更改作为 ListView 子项的 CustomListTile 的颜色，并将其他子项颜色设置为默认颜色？

【英文标题】：I want to change the color of CustomListTile which is child of ListView when onTap is clicked, and setting other children color into default one?

【发布时间】：2020-01-05 06:28:38

【问题描述】：

在 Drawer 中，在 listview 中想要在单击 onTap 时更改 CustomListTile 的颜色并将所有其他子项的颜色设置为默认值？

class CustomListTile extends StatelessWidget 

  final Color itemContainerColor;

  const CustomListTile(
    //deafult color is Colors.white
    this.itemContainerColor= Colors.white,
  );

  @override
  Widget build(BuildContext context) 
    return InkWell(
      onTap: (),

    child: Container(
    margin: EdgeInsets.symmetric(vertical: 4),
    padding: EdgeInsets.symmetric(vertical: 5, horizontal: 16),
    width: 150,
    decoration: BoxDecoration(

        color: itemContainerColor,
       )
    child: 
        Text(
          "ListTile 1",
          style: TextStyle(
              fontSize: 20,
              color: Colors.green,
              fontWeight: FontWeight.w600),
        ),

     ),
   ));
  
 

【参考方案1】：

试试这个。

    class ChangeListViewBGColor extends StatefulWidget 
    _ChangeListViewBGColorState createState() => _ChangeListViewBGColorState();
    

    class _ChangeListViewBGColorState extends State<ChangeListViewBGColor> 
    final List<String> _listViewData = [
        "Item 1",
        "Item 2",
        "Item 3",
        "Item 4",
        "Item 5",
        "Item 6",
        "Item 7",
        "Item 8",
    ];

    int _selectedIndex = 0;

    _onSelected(int index) 
        setState(() => _selectedIndex = index);
    

    @override
    Widget build(BuildContext context) 
        return Scaffold(
        appBar: AppBar(
            title: Text('BG change'),
        ),
        body: ListView.builder(
            itemCount: _listViewData.length,
            itemBuilder: (context, index) => Container(
            color: _selectedIndex != null && _selectedIndex == index
                ? Colors.red
                : Colors.white,
            child: ListTile(
                title: CustomListTile(_listViewData[index]),
                onTap: () => _onSelected(index),
            ),
            ),
        ),
        );
    
    

    class CustomListTile extends StatelessWidget 

    var titleName;

    CustomListTile(this.titleName);

    @override
    Widget build(BuildContext context) 
        return InkWell(
        child: Container(
            child: Text(
                this.titleName,
                style: TextStyle(
                    fontSize: 20, color: Colors.green, fontWeight: FontWeight.w600),
            ),
            margin: EdgeInsets.symmetric(vertical: 4),
            padding: EdgeInsets.symmetric(vertical: 5, horizontal: 16),
            width: 150,

        )
        );
    
    

【参考方案2】：

Aakash 只需在标签上使用一个布尔值，如 colorChange = true，当按钮单击时，其他手放在容器的子小部件中...

     colorChange ? 
       Text(
         "ListTile 1",
         style: TextStyle(
             fontSize: 20,
             color: Colors.red, // which color you need to use
             fontWeight: FontWeight.w600),
       ): Text(
         "ListTile 2",
         style: TextStyle(
             fontSize: 20,
             color: Colors.green,
             fontWeight: FontWeight.w600),
       )

【参考方案3】：

注意：可以根据@Amit Prajapati 的解决方案/逻辑进行，但如果 你的用例会随着时间的推移变得复杂，那么我建议 按照以下解决方案进行。

当您需要从元素列表中更改特定元素的属性时，请使用与该属性接受的值具有相同数据类型的值列表，该值的长度与元素数量的长度相同你的主要清单。

在您的情况下，您需要在用户单击时更改特定 ListTile 的颜色。所以声明一个颜色列表。

List<Color> tileColors;

现在在您的主小部件的 initState() 中，使用其默认值初始化列表（取决于我们的主小部件的长度）。

for(int i=0;i<items.length;i++) tileColors.add(defaultColor);

现在在使用构建器函数时，使用 tileColors[index] 设置列表中的每个项目（ListTile），

（我将使用 ListView.builder）

ListView.builder(
itemCount: items.length,
 itemBuilder: (BuildContext context, int index) 
     return new Container(
       color: tileColors[index],
       child: ListTile([...]),
);
    
)

现在只要 setState() 用户点击该 ListTile 的属性（颜色）值即可。

ListView.builder(
  itemCount: items.length,
  itemBuilder: (BuildContext context, int index) 
     return new Container(
       color: tileColors[index],
       child: ListTile(
         onTap: ()
            setState(()
          for(int i=0;i<item.length;i++) tileColors[i] = defaultColor;

          tileColors[index] = selectedColor; // selectedColor is the color which you wish to change to.

         // Note: You can add your own conditions over. e.g. If you want the first tile to be of a specific color and the rest should be different color while the user taps.
);

),
   );
    
)

提示：您可以使用 AnimatedContainer 代替 Container 小部件来创建 当用户点击时平滑过渡。将duration参数设置为Duration(milliseconds: 300)。