我如何在可滚动的脚手架中嵌套堆栈
。但是我遇到了一个错误,屏幕变白了(显示脚手架,拒绝使我的小部件呈现错误),我以某种方式知道我必须在某个地方限制一些小部件,但是我不知道哪个要给高度,由于我需要整个屏幕可以滚动,所以我什至尝试不使整个屏幕滚动或给较低容器的孩子们一定的固定高度(如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: [
],
),
],
),
),
),
],
),
),
),
);
}
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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论