如何与 ListView 分开显示项目

Question

我有一个 FutureBuilder - ListView.builder，是否可以显示列表中的每个项目？

我使用过不透明度、可见性小部件，但两者都可以同时工作。 我只是想在我按下一件特定的东西时看到这一点。 提前致谢。

  bool visible = false;

    FutureBuilder(
            builder: (context, snap) {
                return ListView.builder(
                    shrinkWrap: true,
                    itemCount: snap.data.length,
                    scrollDirection: Axis.vertical,
                    itemBuilder: (context, index) {
                      Voca voca = snap.data[index];

                      return GestureDetector(
                          onLongPress: () => visible = !visible,
                          onLongPressEnd: (details) => visible = !visible,
                          key: Key(snap.data[index].toString()),
                              child: Container(
                                decoration: BoxDecoration(
                                    border: Border(
                                        bottom: BorderSide(
                                            width: 1.2,
                                            color: Colors.black
                                                .withOpacity(0.3)))),
                             
                              child: Column(
                                  crossAxisAlignment:
                                      CrossAxisAlignment.stretch,
                                  children: <Widget>[
                                    Column(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.stretch,
                                        children: <Widget>[
                                          Text(voca.word,
                                              style: TextStyle(
                                                  fontSize: 19,
                                                  fontWeight: FontWeight.w700,
                                                  color: Colors.black)),
                                          SizedBox(height: 2),
                                          Row(children: <Widget>[
                                            Visibility(
                                                visible: visible,
                                                child: Text(voca.meaning,
                                                    style: TextStyle(
                                                        fontSize: 17,
                                                        fontWeight:
                                                            FontWeight.w500,
                                                        color: Colors.black.withOpacity(0.7)))),
                                          
                             ));
                    });
              }
            },
            future: loadVoca()
)

Answer 1

您正在为列表中的所有项目使用单一“可见”状态。
最好的方法是为您的列表项创建一个有状态的小部件并在您的 ListView 中使用它。这样每个项目都会有自己的状态，不会影响其他项目。

class MyVisibilityWidget extends StatefulWidget {
  final Voca voca;

  const MyVisibilityWidget({
    Key key,
    @required this.voca,
  }) : super(key: key);

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

class _MyVisibilityWidgetState extends State<MyVisibilityWidget> {
  bool _visible = false;
  
  Voca get voca => widget.voca;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onLongPress: () => _visible = !_visible,
      onLongPressEnd: (details) => _visible = !_visible,
      child: Container(
        decoration: BoxDecoration(
            border: Border(
                bottom: BorderSide(
                    width: 1.2, color: Colors.black.withOpacity(0.3)))),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Text(
                  voca.word,
                  style: TextStyle(
                    fontSize: 19,
                    fontWeight: FontWeight.w700,
                    color: Colors.black,
                  ),
                ),
                SizedBox(height: 2),
                Row(
                  children: <Widget>[
                    Visibility(
                      visible: _visible,
                      child: Text(
                        voca.meaning,
                        style: TextStyle(
                          fontSize: 17,
                          fontWeight: FontWeight.w500,
                          color: Colors.black.withOpacity(0.7),
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

之后，只需在您的构建器中使用它：

Voca voca = snap.data[index];

return MyVisibilityWidget(
   voca: voca,
);