Flutter 颤振中各种小部件的滚动问题

我正在尝试创建一个特定的视图，其中我在屏幕上有一个以上的“大”小部件。这样做的目的是显示一个GridView（shrinkwrapped）和一个ListView（shrinkwrapped），前者最多包含4张结束事件的卡片，后者最多可以容纳几十个乐队

这两个东西都可以在单独的视图上，但需要在主视图中显示这些简短的grid+列表。在我看来，它看起来也更好。但颤振给我的滚动带来了问题

看看它目前的样子：

至于现在，我能够同时显示GridView和ListView，但是滚动效果非常非常糟糕。就目前而言，这两个小部件都包装在一个SingleChildScrollView中，我想这不是一个好的解决方案，因为它没有一个孩子。如果我将手指放在父窗口小部件的某个部分（就像标题或黑色背景），它就可以工作，但如果我将手指放在任何窗口小部件（gridview或scrollview）上，它就不能工作

我的目标是将滚动功能委托给父窗口小部件，因此无论我将手指放在何处，我都可以滚动整个视图，而不仅仅是滚动当前发生的子视图

这是我的主页代码：

return Scaffold(
        appBar: AppBar(
          // Here we take the value from the MyHomePage object that was created by
          // the App.build method, and use it to set our appbar title.
          title: Text(widget.title),
          backgroundColor: Colors.indigo,
        ),
        body: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Padding(padding: EdgeInsets.only(top: 30)),
              Text(
                '¡Bienvenido a Sonorio!',
                style: TextStyle(fontSize: 24),
              ),
              Padding(padding: EdgeInsets.only(top: 25)),
              EventsList(key: new Key('test')),
              ListView(
                shrinkWrap: true,
                padding: const EdgeInsets.all(8),
                children: <Widget>[
                  Container(
                    height: 100,
                    color: Colors.amber[600],
                    child: const Center(child: Text('Entry A')),
                  ),
                  Container(
                    height: 50,
                    color: Colors.amber[500],
                    child: const Center(child: Text('Entry B')),
                  ),
                  Container(
                    height: 50,
                    color: Colors.amber[100],
                    child: const Center(child: Text('Entry C')),
                  ),
                ],
              )
            ],
          ),
        ));

返回脚手架(
appBar:appBar(
//在这里，我们从MyHomePage对象中获取由创建的值
//使用App.build方法，并使用它设置appbar标题。
标题：文本（widget.title），
背景颜色：Colors.indigo，
),
正文：SingleChildScrollView(
子：列(
mainAxisAlignment:mainAxisAlignment.start，
儿童：[
填充（填充：仅限边集（顶部：30）），
正文(
“别因维多·索诺里奥！”，
样式：TextStyle（字体大小：24），
),
填充（填充：仅限边集（顶部：25）），
事件列表（键：新键（'test'）），
列表视图(
收缩膜：对，
填充：常量边集。全部（8），
儿童：[
容器(
身高：100，
颜色：颜色。琥珀色[600]，
子项：常量中心（子项：文本（‘条目A’），
),
容器(
身高：50，
颜色：颜色。琥珀色[500]，
子项：常量中心（子项：文本（'条目B'）），
),
容器(
身高：50，
颜色：颜色。琥珀色[100]，
子项：常量中心（子项：文本（‘条目C’），
),
],
)
],
),
));

EventsList小部件只是一个具有包络处理的GridView：

  Widget build(BuildContext context) {
    return FutureBuilder<List<Event>>(
        future: new EventsService().getEventsForCoords(),
        builder: (context, AsyncSnapshot<List<Event>> snapshot) {
          if (snapshot.hasData) {
            return Column(children: [
              Text('Eventos musicales en tu zona: ',
                  style: TextStyle(
                      shadows: [
                        Shadow(
                            blurRadius: 2,
                            color: Colors.indigo[300],
                            offset: Offset.fromDirection(1, 1))
                      ],
                      fontSize: 18,
                      fontFamily: "Roboto",
                      color: Colors.indigo[200],
                      fontWeight: FontWeight.bold)),
              Padding(padding: EdgeInsets.only(bottom: 8)),
              GridView.count(
                  crossAxisCount: 2,
                  shrinkWrap: true,
                  children: generateProximityEventCards(snapshot.data)),
            ]);
          } else {
            return CircularProgressIndicator();
          }
        });
  }

小部件构建（构建上下文）{
回归未来建设者(
未来：新建EventsService（）.getEventsForCoords（），
生成器：（上下文，异步快照）{
if（snapshot.hasData）{
返回列（子项：[
文本（'Eventos musicales en tu zona:'，
样式：TextStyle(
阴影：[
影子(
半径：2，
颜色：颜色。靛蓝[300]，
偏移量：偏移量。从方向（1，1））
],
尺码：18，
fontFamily：“机器人”，
颜色：颜色。靛蓝[200]，
fontWeight:fontWeight.bold），
填充（填充：仅限边集（底部：8）），
GridView.count(
交叉轴计数：2，
收缩膜：对，
子项：generateProximityEventCards（snapshot.data）），
]);
}否则{
返回循环ProgressIndicator（）；
}
});
}

我如何才能让它工作，或者至少将子窗口小部件滚动功能委托给父窗口小部件

---

谢谢大家!

根据我看到的要求，您不希望子滚动，否则您只希望滚动发生在布局上，即对于

ParentWidget

在查看您的代码后，我建议进行某些更改：

• 使用

  Column（）

  代替

  ListView（）

• 使用时，它将禁用

  小部件的滚动

有些东西，我已经在代码中更改了，所以只需看看最终结果，然后进行修改

• 您的

  GridView

  使用我的虚拟

  Container（）

  小部件代替您的小部件

  generateProximityEventCards（snapshot.data））

• 没有使用FutureBuilder，因为我使用的是静态数据。因此，只需使用

  Column（）

  part来显示最终结果

让我们直接进入代码

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Padding(padding: EdgeInsets.only(top: 30)),
              Text(
                '¡Bienvenido a Sonorio!',
                style: TextStyle(fontSize: 24),
              ),
              Padding(padding: EdgeInsets.only(top: 25)),
              EventsList(),
              // Used column with padding for ListView
              Padding(
                padding: EdgeInsets.all(8.0),
                child: Column(
                  children: <Widget>[
                    Container(
                      height: 100,
                      color: Colors.amber[600],
                      child: const Center(child: Text('Entry A')),
                    ),
                    Container(
                      height: 50,
                      color: Colors.amber[500],
                      child: const Center(child: Text('Entry B')),
                    ),
                    Container(
                      height: 50,
                      color: Colors.amber[100],
                      child: const Center(child: Text('Entry C')),
                    ),
                  ],
                )
              )
            ]
          )
        )
    );
  }
}

// cusomt eventlist widget, you can make the changes eventually
class EventsList extends StatelessWidget{
  Widget get myWidget => Container(
    height: 50.0,
    width: 50.0,
    margin: EdgeInsets.only(right: 18.0, left: 18.0, bottom: 18.0),
    decoration: BoxDecoration(
      color: Colors.greenAccent,
      borderRadius: BorderRadius.circular(12.0)
    )
  );
  
  Widget build(BuildContext context) {
    return Column(children: [
      Text('Eventos musicales en tu zona: ',
          style: TextStyle(
              shadows: [
                Shadow(
                    blurRadius: 2,
                    color: Colors.indigo[300],
                    offset: Offset.fromDirection(1, 1))
              ],
              fontSize: 18,
              fontFamily: "Roboto",
              color: Colors.indigo[200],
              fontWeight: FontWeight.bold)),
      Padding(padding: EdgeInsets.only(bottom: 8)),
      GridView.count(
          crossAxisCount: 2,
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(), //diables the scrolling
          children: [
            // my widget which I created
            myWidget,
            myWidget,
            myWidget,
            myWidget
          ]
      ),
    ]);
  }
}

class\u MyHomePageState扩展状态{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（widget.title），
),
正文：SingleChildScrollView(
子：列(
mainAxisAlignment:mainAxisAlignment.start，
儿童：[
填充（填充：仅限边集（顶部：30）），
正文(
“别因维多·索诺里奥！”，
样式：TextStyle（字体大小：24），
),
填充（填充：仅限边集（顶部：25）），
EventsList（），
//为ListView使用带填充的列
填充物(
填充：边缘设置。全部（8.0），
子：列(
儿童：[
容器(
身高：100，
颜色：颜色。琥珀色[600]，
子项：常量中心（子项：文本（‘条目A’），