堆栈内部的 ListView 导致颤动问题

Question

我一定会接受这个问题的正确答案
你好，我正在尝试创建一个类似于此的布局

我的计划是创建一个包含两个展开的小部件的列，一个的弹性为 5，另一个的弹性为 5，以便它们都占用第一个展开的可用空间的一半 space ，我添加了一个背景图像和一个 Stack 小部件。在 Stack 小部件内，我放置了 2 个文本小部件和一个列表视图，我将列表视图包装在一个容器中并设置它的高度以避免无限约束。然后我将列表视图包裹在一个定位的小部件中，并试图将它推到下面。我可以稍后定位小部件，但我只关心 listview 是水平的并略微溢出父容器，但是当我运行给定代码时没有任何显示。
下面是main.dart

下的所有代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String user = FirebaseAuth.instance.currentUser.email == null
      ? FirebaseAuth.instance.currentUser.phoneNumber
      : FirebaseAuth.instance.currentUser.email;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          children: [
            Expanded(
              flex: 4,
              child: Container(
                width: double.infinity,
                decoration: BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(35),
                    bottomRight: Radius.circular(35),
                  ),
                ),
                child: Stack(
                  alignment: AlignmentDirectional.center,
                  fit: StackFit.expand,
                  children: [
                    Text(
                      '1268',
                      style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.w900,
                        fontSize: 60,
                        fontFamily: 'Rubik',
                      ),
                    ),
                    Text(
                      'Points Available',
                      style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.w900,
                        fontSize: 15,
                        fontFamily: 'Rubik',
                      ),
                    ),
                    Positioned(
                      //TODO: Mess with this to make the listview overflow its parent container
                       top: 100,
                      child: Container(
                        height: 44,
                        color: Colors.white,
                        child: ListView(
                          children: [],
                        ),
                      ),
                    )
                  ],
                ),
              ),
            ),
            Expanded(
              flex: 6,
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(35),
                    topRight: Radius.circular(35),
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

重现步骤

  font_awesome_flutter: ^9.1.0

在pubspec.yaml下导入包在main.dart

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

这就是您重现错误所需的全部内容，您应该会看到什么都没有出现，我不确定为什么，我希望最终能够重现此布局

Answer 1

问题不在于 ListView，而在于 Positioned。

向其添加 left: 0 和 right: 0 值。

  Positioned (
       left: 0,
       right: 0,
       top: 100,
      child: ...
)

在这种情况下，不要忘记明确指定子部件的宽度。例如：宽度：double.infinity,

另一种选择：你只能给 Positioned 添加 left: 0 而不能添加 right: 0，但是 Positioned 本身或者它的子 widget 必须有一个固定的宽度。例如：宽度：200

堆栈内部的 ListView 导致颤动问题

ListView inside of stack causing issues in flutter

user-interface

android

listview

flutter