如何在使用 flutter 单击它时隐藏和显示特定文本

Question

我试图让所有字幕不可见（或提示），当克林特点击字幕（或提示）时，我只想向他们显示已点击显示的字幕

注意：我的列表来自本地数据库

这是一张图片enter image description here

这是我的代码

body: FutureBuilder(
      future: getData(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        List snap = snapshot.data;

        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(child: CircularProgressIndicator());
        }
        if (snapshot.hasError) {
          return Center(
            child: Text("error"),
          );
        }
        return ListView.builder(
            itemCount: snap.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(
                  " ${snap[index]['text']}",
                  textDirection: TextDirection.rtl,
                  style: TextStyle(fontSize: 22),
                ),
                subtitle: Text(
                  " ${snap[index]['answer']}",
                  textDirection: TextDirection.rtl,
                  style: TextStyle(fontSize: 18),
                ),
              );
            });
      },
    ),
  ),
);

}

Answer 1

维护一个变量选择索引。仅当所选索引等于索引

时显示子标题

Answer 2

使用有状态小部件来维护状态。
声明一个用于维护所选索引的变量。

  int? _selectedIndex;

当您单击列表项时，会更新状态，如下面的代码片段所示。
- 有条件地显示字幕or您可以使用Visibility小部件。

FutureBuilder(
      future: getData(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        List snap = snapshot.data;

        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        }
        if (snapshot.hasError) {
          return const Center(
            child: Text("error"),
          );
        }
        return ListView.builder(
          itemCount: snap.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(
                " ${snap[index]['text']}",
                textDirection: TextDirection.rtl,
                style: const TextStyle(fontSize: 22),
              ),
              subtitle: _selectedIndex == index
                  ? Text(
                      " ${snap[index]['answer']}",
                      textDirection: TextDirection.rtl,
                      style: const TextStyle(fontSize: 18),
                    )
                  : null,
              onTap: () {
                setState(() {
                  _selectedIndex = index;
                });
              },
            );
          },
        );
      },
    );

如何在使用 flutter 单击它时隐藏和显示特定文本

how to hide and show specific text when click on it using flutter

dart

flutter

flutter-layout