Flutter：Listview Builder 水平内部堆栈小部件

Question

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

我的试用失败

源代码

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,
              ),
            )
          ],
        )),
      ),
    );
  }
}

Answer 1

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

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,
                  ),
                )
              ],
            )),
      ),
    );
  }
}