【问题标题】：Flutter : Listview Builder Horizontal Inside Stack WidgetFlutter：Listview Builder水平内部堆栈小部件
【发布时间】：2020-04-18 20:46:25
【问题描述】：

我有上面的设计，在那个设计中我实现了应用程序。我在容器内有堆栈小部件，然后在堆栈小部件内我有 ListviewBuilder 滚动方向水平。但问题是，我无法在 Stack 小部件内滚动 ListViewBuilder Horizontal。我该如何解决这个问题？

我的尝试失败

源代码

class HomeScreen extends StatelessWidget {
  static const routeName = "/home-screen";
  @override
  Widget build(BuildContext context) {
    final mqHeight = MediaQuery.of(context).size.height;
    final mqWidth = MediaQuery.of(context).size.width;

    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          elevation: 0,
          title: Text('Good Morning'),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.settings),
              onPressed: () => "",
            )
          ],
        ),
        body: SingleChildScrollView(
            child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: mqHeight / 3,
              child: Stack(
                overflow: Overflow.visible,
                children: <Widget>[
                  Container(
                    color: Colors.red,
                  ),
                  Positioned(
                    top: mqHeight / 4.5,
                    child: SizedBox(
                      height: 100,
                      child: ListView.builder(
                        physics: ClampingScrollPhysics(),
                        scrollDirection: Axis.horizontal,
                        shrinkWrap: true,
                        itemCount: 20,
                        itemBuilder: (BuildContext context, int index) {
                          return Container(
                            width: 100,
                            child: Card(
                                elevation: 10,
                                child: Icon(Icons.card_giftcard)),
                          );
                        },
                      ),
                    ),
                  )
                ],
              ),
            ),
            Container(
              child: Text(
                'data   data   data   data   data   data   data   data   data   ',
                style: Theme.of(context).textTheme.display4,
              ),
            )
          ],
        )),
      ),
    );
  }
}

【问题讨论】：

标签： flutter dart

【解决方案1】：

您可以在下面复制粘贴运行完整代码
来自https://github.com/flutter/flutter/issues/36584#issuecomment-554950474
添加top, right, bottom属性
代码 sn -p

Positioned(
                        top: mqHeight / 4.5,
                        left:0.0,
                        right:0.0,
                        bottom:0.0,
                        child: SizedBox(
                          height: 100,
                          child: ListView.builder(

工作演示

完整代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(        
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  static const routeName = "/home-screen";
  @override
  Widget build(BuildContext context) {
    final mqHeight = MediaQuery.of(context).size.height;
    final mqWidth = MediaQuery.of(context).size.width;

    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          elevation: 0,
          title: Text('Good Morning'),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.settings),
              onPressed: () => "",
            )
          ],
        ),
        body: SingleChildScrollView(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Container(
                  color: Colors.blue,
                  height: mqHeight / 3,
                  child: Stack(
                    overflow: Overflow.visible,
                    children: <Widget>[
                      Container(
                        color: Colors.red,
                      ),
                      Positioned(
                        top: mqHeight / 4.5,
                        left:0.0,
                        right:0.0,
                        bottom:0.0,
                        child: SizedBox(
                          height: 100,
                          child: ListView.builder(
                            physics: ClampingScrollPhysics(),
                            scrollDirection: Axis.horizontal,
                            shrinkWrap: true,
                            itemCount: 20,
                            itemBuilder: (BuildContext context, int index) {
                              return Container(
                                width: 100,
                                child: Card(
                                    elevation: 10,
                                    child: Icon(Icons.card_giftcard)),
                              );
                            },
                          ),
                        ),
                      )
                    ],
                  ),
                ),
                Container(
                  child: Text(
                    'data   data   data   data   data   data   data   data   data   ',
                    style: Theme.of(context).textTheme.display4,
                  ),
                )
              ],
            )),
      ),
    );
  }
}

【讨论】：

它的工作！但我有一点问题，如果我的卡与 appbar 重叠，卡的底部不能滚动。只能滚动顶部和中心卡片。
需要先重现这个案例。你能发布一些代码来重现吗？谢谢。
i.stack.imgur.com/oZL8K.gif gist.github.com/zgramming/eab37028f6f0ebbed001ef535f40bf4d
我已经测试过了，你可以加bottom:0，就可以了。
hmmmm 是的，它可以工作，但它不与 appbar 重叠，它在 appbar 内。我想要像我上面的设计一样的东西。有可能吗？

【解决方案2】：

我已经修复如下：

Positioned(
  top: mqHeight / 4.5,
  left: 0, /// <-- fixed here
  right: 0, /// <-- fixed here
  child: SizedBox(
    height: 100,
    child: ListView.builder(
      physics: ClampingScrollPhysics(),
      scrollDirection: Axis.horizontal,
        shrinkWrap: true,
        itemCount: 20,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            width: 100,
            child: Card(
              elevation: 10,
                child: Icon(Icons.card_giftcard)),
          );
        },
      ),
    ),
 )```

【讨论】：