listview - 在颤动中实现带有文本的可缩放列表视图

Question

我是新来的，并试图用几个文本容器制作一个列表视图。我喜欢在其中添加捏缩放功能，但它工作得不是很顺利。在列表视图的某些部分，它可以正常工作，但有时必须非常用力才能放大并且它是完全随机的。

这是我的代码：

class BodyLayout extends StatefulWidget {
  _BodyLayout createState() => _BodyLayout();
}

class _BodyLayout extends State<BodyLayout> {
  @override
  Widget build(BuildContext context) {
    return _myListView(context);
  }

 Widget _myListView(BuildContext context) {
  return InteractiveViewer(
        panEnabled: true, // Set it to false to prevent panning.
        boundaryMargin: EdgeInsets.all(2),
        minScale: 0.5,
        maxScale: 4,
        child:  ListView.builder(
          itemCount: 286,
          itemBuilder: (context, index) {
            if (index == 0) {
          return Card(
                  //                           <-- Card widget
                  child: Column(
                    textDirection: TextDirection.rtl,
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: <Widget>[
                      Wrap(
                      direction: Axis.horizontal,
                      alignment: WrapAlignment.start,
                      runAlignment: WrapAlignment.center,
                      textDirection: TextDirection.rtl,
                      spacing: 10.0,
                      // gap between adjacent chips
                      runSpacing: 10.0,
                      // gap between lines
                      children: <Widget>[
                        _V1Card0(),
                        _V1Card1(),
                      ]),
                  new Padding(
                      padding: EdgeInsets.fromLTRB(5, 5, 5, 5),
                      child: Text(UrduV1,
                          style: TextStyle(
                              fontSize: 24.0,
                              fontWeight: FontWeight.w200,
                              fontFamily: 'nafees'),
                          textDirection: TextDirection.rtl,
                          textAlign: TextAlign.right))
                ],
              ));
        }
        if (index == 1) {
          return  Card(
                child: Column(
                    textDirection: TextDirection.rtl,
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: <Widget>[
                      Wrap(
                          direction: Axis.horizontal,
                          alignment: WrapAlignment.start,
                          runAlignment: WrapAlignment.center,
                          textDirection: TextDirection.rtl,
                          spacing: 2.0,
                          // gap between adjacent chips
                          runSpacing: 5.0,
                          children: <Widget>[
                            _V2Card0(),
                            _V2Card1(),
                            _V2Card2(),
                            _V2Card3(),
                            _V2Card4(),
                            _V2Card5(),
                            _V2Card6(),
                          ]),
                      new Padding(
                          padding: EdgeInsets.fromLTRB(5, 5, 5, 5),
                          child: Text(EngV2,
                              textDirection: TextDirection.ltr,
                              textAlign: TextAlign.justify)),
                    ]),
              );
        }
        if (index == 2) {
          return Card(
                  child: Wrap(
                      direction: Axis.horizontal,
                      alignment: WrapAlignment.start,
                      runAlignment: WrapAlignment.center,
                      textDirection: TextDirection.rtl,
                      spacing: 2.0,
                      // gap between adjacent chips
                      runSpacing: 5.0,
                      children: <Widget>[
                    new Padding(
                        padding: EdgeInsets.fromLTRB(5, 5, 5, 5),
                        child: Text(arabicV3,
                            style: TextStyle(
                                fontSize: 24.0,
                                fontWeight: FontWeight.w200,
                                fontFamily: 'uthmanitext'),
                            textDirection: TextDirection.rtl,
                            textAlign: TextAlign.start)),
                    new Padding(
                        padding: EdgeInsets.fromLTRB(5, 5, 5, 5),
                        child: Text(EngV3,
                            textDirection: TextDirection.ltr,
                            textAlign: TextAlign.start))
                  ]));
        }

        return Card(
          child: Column(
              textDirection: TextDirection.rtl,
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Wrap(
                    direction: Axis.horizontal,
                    alignment: WrapAlignment.start,
                    runAlignment: WrapAlignment.center,
                    textDirection: TextDirection.rtl,
                    spacing: 2.0,
                    // gap between adjacent chips
                    runSpacing: 5.0,
                    children: <Widget>[
                      _V2Card0(),
                      _V2Card1(),
                      _V2Card2(),
                      _V2Card3(),
                      _V2Card4(),
                      _V2Card5(),
                      _V2Card6(),
                    ]),
                new Padding(
                    padding: EdgeInsets.fromLTRB(5, 5, 5, 5),
                    child: Text(EngV2,
                        textDirection: TextDirection.ltr,
                        textAlign: TextAlign.justify)),
              ]),
        );
      },
    ) );
  }
}

我也尝试过使用缩放和 photo_view 小部件以及矩阵手势检测器，但是在缩小时它们会使列表视图变得如此之小。请帮助使其捏合缩放功能顺利运行。

标签： listviewflutter-layoutpinchzoompinch