我如何在可滚动的脚手架中嵌套堆栈

发布于 2025-02-08 21:23:52 字数 7860 浏览 2 评论 0原文

。但是我遇到了一个错误,屏幕变白了(显示脚手架,拒绝使我的小部件呈现错误),我以某种方式知道我必须在某个地方限制一些小部件,但是我不知道哪个要给高度,由于我需要整个屏幕可以滚动,所以我什至尝试不使整个屏幕滚动或给较低容器的孩子们一定的固定高度(如900),但仍然不起作用,我该如何实现这一目标, 到目前为止,这是我的代码

@override
  Widget build(BuildContext context) {
    _animationController.forward();
    return Consumer<ProductsModel>(
      builder: (_, pModel, __) => Scaffold(
        body: SingleChildScrollView(
          child: Stack(
              children: [
                Positioned(
                  left: 0,
                  right: 0,
                  child: Container(
                    width: double.maxFinite,
                    height: Dimensions.height395,
                    color: const Color(0xffF8F9FA),
                    child: Stack(
                      children: [
                        PageView.builder(
                          itemCount: widget.product.productImages!.length,
                          controller: _pageController,
                          onPageChanged: (value) {
                            _currentPage = value;
                            _animationController.forward();
                            // setState(() {});
                          },
                          itemBuilder: (context, index) {
                            return Center(
                              child: Container(
                                margin: EdgeInsets.only(top: Dimensions.height50),
                                width: Dimensions.productDetailContainerWidth,
                                height: Dimensions.productDetailContainerHeight,
                                decoration: BoxDecoration(
                                  image: DecorationImage(
                                    image: AssetImage(
                                      widget.product.productImages![index],
                                    ),
                                  ),
                                ),
                              ),
                            );
                          },
                        ),
                        Align(
                          alignment: Alignment.bottomCenter,
                          child: Padding(
                            padding: EdgeInsets.only(bottom: Dimensions.height20),
                            child: DotsIndicator(
                              dotsCount: widget.product.productImages!.length,
                              position: _currentPageValue,
                              decorator: DotsDecorator(
                                activeColor: kMainColour,
                                size: const Size.square(9.0),
                                activeSize: const Size(18.0, 9.0),
                                activeShape: RoundedRectangleBorder(
                                    borderRadius:
                                    BorderRadius.circular(Dimensions.radius5)),
                              ),
                            ),
                          ),
                        ),
                        Align(
                          alignment: Alignment.bottomRight,
                          child: Padding(
                            padding: EdgeInsets.only(
                                bottom: Dimensions.height20,
                                right: Dimensions.height20),
                            child: GestureDetector(
                              onTap: () {
                                pModel.toggleSave(context, widget.product);
                              },
                              child: Container(
                                height: Dimensions.height32,
                                width: Dimensions.height32,
                                decoration: BoxDecoration(
                                  color: Colors.white,
                                  shape: BoxShape.circle,
                                  border: Border.all(
                                    color: const Color(0xffDADADA),
                                  ),
                                ),
                                child: Icon(
                                  widget.product.isSaved
                                      ? IconlyBold.heart
                                      : IconlyBroken.heart,
                                  color: kMainColour,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                //  todo: nav row
                Positioned(
                  top: Dimensions.height45,
                  right: Dimensions.height20,
                  left: Dimensions.height20,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      BackNavButton(
                        onTap: () {
                          Navigator.pop(context);
                        },
                      ),
                      Text(
                        widget.product.productSeller!,
                        style: TextStyle(
                          fontFamily: kFontFamily,
                          fontWeight: FontWeight.w600,
                          fontSize: Dimensions.font14,
                        ),
                      ),
                      SvgPicture.asset("assets/icons/chat_icon.svg")
                    ],
                  ),
                ),
                //  todo: review and details
                Positioned(
                  left: 0,
                  right: 0,
                  top: Dimensions.height395 - Dimensions.height10,
                  child: Container(
                    height: 900,
                    padding: EdgeInsets.only(left: Dimensions.height20, right: Dimensions.height20, top: Dimensions.height20),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(Dimensions.radius20),
                      color: Colors.white,
                    ),
                    child: Row(
                      children: [
                        Column(
                          children: [
                            Text(
                              widget.product.productName!,
                              style: TextStyle(
                                fontFamily: kFontFamily,
                                fontWeight: FontWeight.w500,
                                fontSize: Dimensions.font18,
                              ),
                            ),
                            Visibility(
                              visible: widget.product.discount != null,
                              child: Text(
                                "(${widget.product.discount}% Discount)",
                                style: TextStyle(
                                  fontFamily: kFontFamily,
                                  fontWeight: FontWeight.w500,
                                  fontSize: Dimensions.font13,
                                  color: const Color(0xff9098B1),
                                ),
                              ),
                            ),
                            const FilterRating(
                              stars: 4,
                            ),
                          ],
                        ),
                        Column(
                          children: [

                          ],
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
        ),
      ),
    );
  }

this is what i wanna achieve

sorry if the image is too fat, I don't know how to format image in stack, so, this is what I wanna achieve, and I've done this with the following code, but I get an error and my screen goes white(showing the scaffold, refusing to render my widgets coz of the errors), I know in some way I have to constrain some widget somewhere, but I don't know which to give a height, since I need my entire screen to be scrollable, I've even tried to not make entire screen scrollable or give the children of the lower container some fixed height like 900, but still, not working, how can I achieve this,
This is my code so far

@override
  Widget build(BuildContext context) {
    _animationController.forward();
    return Consumer<ProductsModel>(
      builder: (_, pModel, __) => Scaffold(
        body: SingleChildScrollView(
          child: Stack(
              children: [
                Positioned(
                  left: 0,
                  right: 0,
                  child: Container(
                    width: double.maxFinite,
                    height: Dimensions.height395,
                    color: const Color(0xffF8F9FA),
                    child: Stack(
                      children: [
                        PageView.builder(
                          itemCount: widget.product.productImages!.length,
                          controller: _pageController,
                          onPageChanged: (value) {
                            _currentPage = value;
                            _animationController.forward();
                            // setState(() {});
                          },
                          itemBuilder: (context, index) {
                            return Center(
                              child: Container(
                                margin: EdgeInsets.only(top: Dimensions.height50),
                                width: Dimensions.productDetailContainerWidth,
                                height: Dimensions.productDetailContainerHeight,
                                decoration: BoxDecoration(
                                  image: DecorationImage(
                                    image: AssetImage(
                                      widget.product.productImages![index],
                                    ),
                                  ),
                                ),
                              ),
                            );
                          },
                        ),
                        Align(
                          alignment: Alignment.bottomCenter,
                          child: Padding(
                            padding: EdgeInsets.only(bottom: Dimensions.height20),
                            child: DotsIndicator(
                              dotsCount: widget.product.productImages!.length,
                              position: _currentPageValue,
                              decorator: DotsDecorator(
                                activeColor: kMainColour,
                                size: const Size.square(9.0),
                                activeSize: const Size(18.0, 9.0),
                                activeShape: RoundedRectangleBorder(
                                    borderRadius:
                                    BorderRadius.circular(Dimensions.radius5)),
                              ),
                            ),
                          ),
                        ),
                        Align(
                          alignment: Alignment.bottomRight,
                          child: Padding(
                            padding: EdgeInsets.only(
                                bottom: Dimensions.height20,
                                right: Dimensions.height20),
                            child: GestureDetector(
                              onTap: () {
                                pModel.toggleSave(context, widget.product);
                              },
                              child: Container(
                                height: Dimensions.height32,
                                width: Dimensions.height32,
                                decoration: BoxDecoration(
                                  color: Colors.white,
                                  shape: BoxShape.circle,
                                  border: Border.all(
                                    color: const Color(0xffDADADA),
                                  ),
                                ),
                                child: Icon(
                                  widget.product.isSaved
                                      ? IconlyBold.heart
                                      : IconlyBroken.heart,
                                  color: kMainColour,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                //  todo: nav row
                Positioned(
                  top: Dimensions.height45,
                  right: Dimensions.height20,
                  left: Dimensions.height20,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      BackNavButton(
                        onTap: () {
                          Navigator.pop(context);
                        },
                      ),
                      Text(
                        widget.product.productSeller!,
                        style: TextStyle(
                          fontFamily: kFontFamily,
                          fontWeight: FontWeight.w600,
                          fontSize: Dimensions.font14,
                        ),
                      ),
                      SvgPicture.asset("assets/icons/chat_icon.svg")
                    ],
                  ),
                ),
                //  todo: review and details
                Positioned(
                  left: 0,
                  right: 0,
                  top: Dimensions.height395 - Dimensions.height10,
                  child: Container(
                    height: 900,
                    padding: EdgeInsets.only(left: Dimensions.height20, right: Dimensions.height20, top: Dimensions.height20),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(Dimensions.radius20),
                      color: Colors.white,
                    ),
                    child: Row(
                      children: [
                        Column(
                          children: [
                            Text(
                              widget.product.productName!,
                              style: TextStyle(
                                fontFamily: kFontFamily,
                                fontWeight: FontWeight.w500,
                                fontSize: Dimensions.font18,
                              ),
                            ),
                            Visibility(
                              visible: widget.product.discount != null,
                              child: Text(
                                "(${widget.product.discount}% Discount)",
                                style: TextStyle(
                                  fontFamily: kFontFamily,
                                  fontWeight: FontWeight.w500,
                                  fontSize: Dimensions.font13,
                                  color: const Color(0xff9098B1),
                                ),
                              ),
                            ),
                            const FilterRating(
                              stars: 4,
                            ),
                          ],
                        ),
                        Column(
                          children: [

                          ],
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
        ),
      ),
    );
  }

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文