简体   繁体   English

ListView 小部件内的 Flutter Stack 小部件?

[英]Flutter Stack Widget inside ListView widget?

I am using the Stack widget in my app and it is working great but now I have a problem with wrapping this Stack widget inside ListView Widget.我在我的应用程序中使用 Stack 小部件,它工作得很好,但现在我在将这个 Stack 小部件包装在 ListView 小部件中时遇到了问题。

I am getting error我收到错误

RenderBox was not laid out: RenderPointerListener#20d10 relayoutBoundary=up7 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1979 pos 12: 'hasSize'

My Stack Widget is我的堆栈小部件是

Widget? stackW() {
    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        Positioned(
          top: 70,
          width: MediaQuery.of(context).size.width * .9,
          height: 150,
          child: Center(
            child: Container(
              width: MediaQuery.of(context).size.width * .9,
              decoration: BoxDecoration(
                  color: Colors.grey[200],
                  borderRadius: BorderRadius.circular(15)),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Text(
                    "Product Designer",
                    style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(
                    height: 10,
                  ),
                 
                ],
              ),
            ),
          ),
        ),
        Positioned(
          top: 30,
          left: MediaQuery.of(context).size.width / 2.5,
          width: 80,
          height: 80,
          child: CircleAvatar(
            backgroundColor: Colors.white,
            child: CircleAvatar(
              backgroundColor: Colors.green[100],
              radius: 35,
              child: const FaIcon(
                FontAwesomeIcons.apple,
                size: 30,
                color: Colors.black,
              ),
            ),
          ),
        ),
      ],
    );
  }

When I am passing stackWidget directly in body then it is working fine but after wrapping inside ListView, it is creating problem.当我直接在 body 中传递 stackWidget 时,它工作正常,但是在包含 ListView 之后,它会产生问题。

so Please guide me to achieve my listview data with Stack Widget.所以请指导我使用 Stack Widget 实现我的列表视图数据。

 body: stackW()!,  //working
body: ListView(
        scrollDirection: Axis.vertical,
        children: [
          stackW()!,
        ],
      ),
``` //not working

Both widgets are getting infinite height, you can wrap stackW() with SizedBox widget.两个小部件都变得无限高,您可以用 SizedBox 小部件包装stackW()

body: LayoutBuilder(
  builder: (context, constraints) => ListView(
    scrollDirection: Axis.vertical,
    children: [
      SizedBox(
        height: constraints.maxHeight,
        width: constraints.maxWidth,
        child: stackW()!,
      )
    ],
  ),
),

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM