在顫動中單擊時僅在ListTile中的一項上顯示尾隨圖示

基本上我希望用戶從串列中只選擇 1 個年齡，并在點擊時顯示尾隨圖示ListTile，當用戶單擊其他ListTile時，尾隨圖示應該轉移到那個磁貼。

我得到了什么

我想要的是

我的ListView代碼：

ListView.separated(
  itemCount: ageList.length,
  itemBuilder: (context, index) {
    return ItemWidget(
      item: ageList[index],
    );
  },
  separatorBuilder: (context, index) {
    return Divider(height: 0);
  },
),

我的串列磁貼代碼

 return ListTile(
  onTap: () {
    print("${widget.item.name} pressed");
    setState(() {
      // widget.item.clicked = !widget.item.clicked;
    });
    widget.item.clicked = !widget.item.clicked;
  },
  title: Padding(
    padding: const EdgeInsets.only(left: 6.0),
    child: Text(widget.item.name),
  ),
  trailing: Visibility(
    visible:  widget.item.clicked == null ? false : widget.item.clicked,
    child: Icon(
      Icons.done,
      color: Colors.white,
    ),
  ),
);

uj5u.com熱心網友回復：

然后您不需要在物件級別保存選擇狀態。您可以使用 int 型別的單個變數來處理它

int selectedAge = -1;
  _ageList(index){
    return ListTile(
      onTap: () {
        setState(() {
          selectedAge = index;
        });
      },
      title: Padding(
        padding: const EdgeInsets.only(left: 6.0),
        child: Text(widget.item.name),
      ),
      trailing: Visibility(
        visible:  selectedAge == index,
        child: Icon(
          Icons.done,
          color: Colors.white,
        ),
      ),
    );
  }

uj5u.com熱心網友回復：

試試下面的代碼希望它對你有幫助，并且使用了一件事

宣告 int var 和您的串列：

int? tappedIndex; 

  List<String> litems = [
    "Counter No 1",
    "Counter No 2",
    "Counter No 3",
    "Counter No 4"
  ];

宣告 initState() 方法

 @override
  void initState() {
    super.initState();
    tappedIndex = 0;
  }

你的小部件：

 return Scaffold(
  body: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      ListView.builder(
          shrinkWrap: true,
          itemCount: litems.length,
          itemBuilder: (context, index) {
            return Container(
                child: ListTile(
              trailing: Visibility(
                visible: tappedIndex == index,
                child: Icon(
                  Icons.done,
                  color: Colors.red,
                ),
              ),
              title: Text(litems[index]),
              onTap: () {
                setState(() {
                  tappedIndex = index;
                });
              },
            ));
          }),
    ],
  ),
);

您的結果螢屏->

uj5u.com熱心網友回復：

我們可以為選定的專案創建一個可為空的變數。雖然可以trailing為空，但我們不需要visibilty小部件來處理它。這是一個示例演示。

class Test extends StatefulWidget {
  Test({Key? key}) : super(key: key);

  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  int? selectedIndex;

  final ageList = List.generate(22, (index) => index);

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      itemCount: ageList.length,
      itemBuilder: (context, index) {
        return ListTile(
          onTap: () {
            setState(() {
              selectedIndex = index;
            });
          },
          title: Padding(
            padding: const EdgeInsets.only(left: 6.0),
            child: Text(ageList[index].toString()),
          ),
          trailing: index == selectedIndex
              ? const Icon(
                  Icons.done,
                  color: Colors.white,
                )
              : null,
        );
      },
      separatorBuilder: (context, index) {
        return Divider(height: 0);
      },
    );
  }
}

標籤：扑 列表显示 列表

上一篇：獲取“List<dynamic>”型別的錯誤不是“Map<String,dynamic>”型別的子型別

下一篇：(Flutter,dart)如何在Listview中選擇特定卡片并將圖示顏色從白色切換為綠色