Question

在抽屉中，在列表视图中，要在单击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),
        ),

     ),
   ));
  }
 }

Answer 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,

        )
        );
    }
    }

Answer 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),
       )

Answer 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)。

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

3 个答案: