我已经尝试过使用单个子滚动视图的方法，但它给了我一个无限大小的错误所以我已经切换到这种方法我的堆栈小部件正确分层，但我的整个堆栈没有滚动。下面是我的代码。
child: Scaffold(
backgroundColor: colorScheme.background,
body: CustomScrollView(
// scrollDirection: Axis.vertical,
// shrinkWrap: true,
// physics: NeverScrollableScrollPhysics(),
slivers: [
SliverFillRemaining(
hasScrollBody: true,
child: Stack(children: [
Image.asset('assets/images/demoProduct.png'),
Positioned(
top: MediaQuery.of(context).size.height / 2 - 50,
// bottom: 0,
child: Container(
padding:
EdgeInsets.symmetric(horizontal: 35.w, vertical: 30),
// height: 900,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
color: Color(0xFFFFFBF8)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(
width: 196.w,
child: Text(
'Bauhaus Enamel Colander Long Name',
style: TextStyle(
fontSize: 18.sp,
fontFamily: 'Mulish',
color: Color(0xFF4B4B4B),
fontWeight: FontWeight.w900),
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'\$ 75.99',
style: TextStyle(
fontSize: 28.sp,
fontFamily: 'Mulish',
color: Color(0xFF00373E),
fontWeight: FontWeight.w900),
),
Text(
'\$ 99.99',
style: TextStyle(
fontSize: 14.sp,
fontFamily: 'Mulish',
color: Color(0xFF8E8E8E),
fontWeight: FontWeight.w900),
),
],
),
],
),
SizedBox(
height: 10,
),
Text(
"By Darling Spring",
style: TextStyle(
fontSize: 12.sp,
fontFamily: 'Mulish',
color: Color(0XFF4DA1A1),
decoration: TextDecoration.underline,
fontWeight: FontWeight.w500,
),
),
SizedBox(
height: 10,
),
Row(
children: [
Icon(
Icons.star_rate_rounded,
color: Color(0XFFC7B661),
),
Icon(
Icons.star_rate_rounded,
color: Color(0XFFC7B661),
),
Icon(
Icons.star_rate_rounded,
color: Color(0XFFC7B661),
),
Icon(
Icons.star_rate_rounded,
color: Color(0XFFC7B661),
),
Icon(
Icons.star_rate_rounded,
color: Color(0XFFC7B661),
),
Text(
'(83)',
style: TextStyle(
fontSize: 12.sp,
fontFamily: 'Mulish',
color: Color(0xFF1D1F22),
fontWeight: FontWeight.w400),
),
],
),
SizedBox(
height: 20,
),
Text(
'Color',
style: TextStyle(
fontSize: 14.sp,
fontFamily: 'Mulish',
color: Color(0xFF4B4B4B),
fontWeight: FontWeight.w400),
),
SizedBox(
height: 5,
),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
...List.generate(
palleteColors.length,
(index) => buildColorPallete(
color: palleteColors[index],
isSelected: _selectedColor == index,
onTap: () {
setState(() {
_selectedColor = index;
});
},
),
),
],
),
),
SizedBox(
height: 15,
),
Text(
'Size',
style: TextStyle(
fontSize: 14.sp,
fontFamily: 'Mulish',
color: Color(0xFF4B4B4B),
fontWeight: FontWeight.w400),
),
Row(
children: [
_buildSize(
title: 'S',
isSelected: _selectedSize == 0,
onTap: () {
setState(() {
_selectedSize = 0;
});
}),
_buildSize(
title: 'M',
isSelected: _selectedSize == 1,
onTap: () {
setState(() {
_selectedSize = 1;
});
}),
_buildSize(
title: 'L',
isSelected: _selectedSize == 2,
onTap: () {
setState(() {
_selectedSize = 2;
});
}),
],
),
SizedBox(
height: 5,
),
Text(
"Size Chart",
style: TextStyle(
fontSize: 12.sp,
fontFamily: 'Mulish',
color: Color(0xFF00798C),
decoration: TextDecoration.underline,
fontWeight: FontWeight.w500,
),
),
SizedBox(
height: 20,
),
Text(
'Quantity',
style: TextStyle(
fontSize: 14.sp,
fontFamily: 'Mulish',
color: Color(0xFF4B4B4B),
fontWeight: FontWeight.w400),
),
SizedBox(
height: 5,
),
Row(
children: [
CupertinoButton(
padding: EdgeInsets.only(right: 10),
onPressed: () {},
child: Container(
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.transparent,
shape: BoxShape.circle,
border: Border.all(
color: Color(0xFF4B4B4B),
)),
child: Icon(
Icons.remove,
color: Color(
0xFF4B4B4,
),
),
),
)
],
)
],
),
),
)
]),
)
],
),
),
);```
**Please let me know if I'm doing something wrong here I've wrapped this custom scroll view with a single child scroll view, even but I'm getting a multiple errors on that approach. I just need the stack elements to get screwed just like a column wrapped with a single child scroll view. **
**I've tried using single child scroll view, but it was giving me an error of infinite size Search switched to another approach using the custom scroll view. I've wrapped my stack in it Under the sliver filled remaining widget But still my stack widget is not getting scrolled Just let me know what else can I do. I'm expecting a solution that helped me to scroll this stack widget just like a column wrapped under a single child scroll view. Just let me know if you need any other additional information to answer this question.**
我已经删除了一些自定义小部件，以便我能够进行测试和调试，但您遇到的问题是
SliverFillRemaininghasScrollBodytrueSingleChildScrollViewScaffold(
body: CustomScrollView(
// scrollDirection: Axis.vertical,
// shrinkWrap: true,
// physics: NeverScrollableScrollPhysics(),
slivers: [
SliverFillRemaining(
child: SingleChildScrollView(
child: Stack(children: [
Image.asset('assets/images/demoProduct.png'),
Positioned(
top: MediaQuery.of(context).size.height / 2 - 50,
// bottom: 0,
child: Container(
padding:
EdgeInsets.symmetric(horizontal: 35, vertical: 30),
// height: 900,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
color: Color(0xFFFFFBF8)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(
width: 196,
child: Text(
'Bauhaus Enamel Colander Long Name',
style: TextStyle(
fontSize: 18,
fontFamily: 'Mulish',
color: Color(0xFF4B4B4B),
fontWeight: FontWeight.w900),
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'\$ 75.99',
style: TextStyle(
fontSize: 28,
fontFamily: 'Mulish',
color: Color(0xFF00373E),
fontWeight: FontWeight.w900),
),
Text(
'\$ 99.99',
style: TextStyle(
fontSize: 14,
fontFamily: 'Mulish',
color: Color(0xFF8E8E8E),
fontWeight: FontWeight.w900),
),
],
),
],
),
SizedBox(
height: 10,
),
Text(
"By Darling Spring",
style: TextStyle(
fontSize: 12,
fontFamily: 'Mulish',
color: Color(0XFF4DA1A1),
decoration: TextDecoration.underline,
fontWeight: FontWeight.w500,
),
),
SizedBox(
height: 10,
),
Row(
children: [
Icon(
Icons.star_rate_rounded,
color: Color(0XFFC7B661),
),
Icon(
Icons.star_rate_rounded,
color: Color(0XFFC7B661),
),
Icon(
Icons.star_rate_rounded,
color: Color(0XFFC7B661),
),
Icon(
Icons.star_rate_rounded,
color: Color(0XFFC7B661),
),
Icon(
Icons.star_rate_rounded,
color: Color(0XFFC7B661),
),
Text(
'(83)',
style: TextStyle(
fontSize: 12,
fontFamily: 'Mulish',
color: Color(0xFF1D1F22),
fontWeight: FontWeight.w400),
),
],
),
SizedBox(
height: 20,
),
Text(
'Color',
style: TextStyle(
fontSize: 14,
fontFamily: 'Mulish',
color: Color(0xFF4B4B4B),
fontWeight: FontWeight.w400),
),
SizedBox(
height: 5,
),
SizedBox(
height: 15,
),
Text(
'Size',
style: TextStyle(
fontSize: 14,
fontFamily: 'Mulish',
color: Color(0xFF4B4B4B),
fontWeight: FontWeight.w400),
),
SizedBox(
height: 5,
),
Text(
"Size Chart",
style: TextStyle(
fontSize: 12,
fontFamily: 'Mulish',
color: Color(0xFF00798C),
decoration: TextDecoration.underline,
fontWeight: FontWeight.w500,
),
),
SizedBox(
height: 20,
),
Text(
'Quantity',
style: TextStyle(
fontSize: 14,
fontFamily: 'Mulish',
color: Color(0xFF4B4B4B),
fontWeight: FontWeight.w400),
),
SizedBox(
height: 5,
),
Row(
children: [
CupertinoButton(
padding: EdgeInsets.only(right: 10),
onPressed: () {},
child: Container(
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.transparent,
shape: BoxShape.circle,
border: Border.all(
color: Color(0xFF4B4B4B),
)),
child: Icon(
Icons.remove,
color: Color(
0xFF4B4B4,
),
),
),
)
],
)
],
),
),
),
Container(decoration: BoxDecoration(color: Colors.red.withOpacity(0.3)),height: MediaQuery.of(context).size.height*2,)
]),
),
),
],
),
);
所以现在它滚动了，因为它应该是另一种方法，您可以只使用
SliverToBoxAdapterSingleChildScrollViewCustomScrollViewScaffold(
body: CustomScrollView(
// scrollDirection: Axis.vertical,
// shrinkWrap: true,
// physics: NeverScrollableScrollPhysics(),
slivers: [
SliverToBoxAdapter(
child: Stack(children: [
Image.asset('assets/images/demoProduct.png'),
Positioned(
top: MediaQuery.of(context).size.height / 2 - 50,
// bottom: 0,
child: Container(
padding:
EdgeInsets.symmetric(horizontal: 35, vertical: 30),
// height: 900,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
color: Color(0xFFFFFBF8)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(
width: 196,
child: Text(
'Bauhaus Enamel Colander Long Name',
style: TextStyle(
fontSize: 18,
fontFamily: 'Mulish',
color: Color(0xFF4B4B4B),
fontWeight: FontWeight.w900),
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'\$ 75.99',
style: TextStyle(
fontSize: 28,
fontFamily: 'Mulish',
color: Color(0xFF00373E),
fontWeight: FontWeight.w900),
),
Text(
'\$ 99.99',
style: TextStyle(
fontSize: 14,
fontFamily: 'Mulish',
color: Color(0xFF8E8E8E),
fontWeight: FontWeight.w900),
),
],
),
],
),
SizedBox(
height: 10,
),
Text(
"By Darling Spring",
style: TextStyle(
fontSize: 12,
fontFamily: 'Mulish',
color: Color(0XFF4DA1A1),
decoration: TextDecoration.underline,
fontWeight: FontWeight.w500,
),
),
SizedBox(
height: 10,
),
Row(
children: [
Icon(
Icons.star_rate_rounded,
color: Color(0XFFC7B661),
),
Icon(
Icons.star_rate_rounded,
color: Color(0XFFC7B661),
),
Icon(
Icons.star_rate_rounded,
color: Color(0XFFC7B661),
),
Icon(
Icons.star_rate_rounded,
color: Color(0XFFC7B661),
),
Icon(
Icons.star_rate_rounded,
color: Color(0XFFC7B661),
),
Text(
'(83)',
style: TextStyle(
fontSize: 12,
fontFamily: 'Mulish',
color: Color(0xFF1D1F22),
fontWeight: FontWeight.w400),
),
],
),
SizedBox(
height: 20,
),
Text(
'Color',
style: TextStyle(
fontSize: 14,
fontFamily: 'Mulish',
color: Color(0xFF4B4B4B),
fontWeight: FontWeight.w400),
),
SizedBox(
height: 5,
),
SizedBox(
height: 15,
),
Text(
'Size',
style: TextStyle(
fontSize: 14,
fontFamily: 'Mulish',
color: Color(0xFF4B4B4B),
fontWeight: FontWeight.w400),
),
SizedBox(
height: 5,
),
Text(
"Size Chart",
style: TextStyle(
fontSize: 12,
fontFamily: 'Mulish',
color: Color(0xFF00798C),
decoration: TextDecoration.underline,
fontWeight: FontWeight.w500,
),
),
SizedBox(
height: 20,
),
Text(
'Quantity',
style: TextStyle(
fontSize: 14,
fontFamily: 'Mulish',
color: Color(0xFF4B4B4B),
fontWeight: FontWeight.w400),
),
SizedBox(
height: 5,
),
Row(
children: [
CupertinoButton(
padding: EdgeInsets.only(right: 10),
onPressed: () {},
child: Container(
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.transparent,
shape: BoxShape.circle,
border: Border.all(
color: Color(0xFF4B4B4B),
)),
child: Icon(
Icons.remove,
color: Color(
0xFF4B4B4,
),
),
),
)
],
)
],
),
),
),
Container(decoration: BoxDecoration(color: Colors.red.withOpacity(0.3)),height: MediaQuery.of(context).size.height*2,)
]),
),
],
),
);
所以在这两种方式中，堆栈都是可滚动的，选择最适合的。 我希望它有帮助：D Kudos