使特定的小工具可滚动

Question

我的页面中有3个部分蓝绿色和红色部分

我想要的是如何使红色部分可以滚动，同时其他部分将被固定在的位置

这是我的小工具树

Container(
child: Stack(
alignment: Alignment.topCenter,
children: [
Column(
children: [
Container(
height: size.height * .12,
decoration: BoxDecoration(color: kPrimaryColor),
),
Container(
height: size.height * .12,
decoration: BoxDecoration(color: Colors.green),
),
// I want this part to be scrollable
Column(
children: [
Container(
height: size.height * 2,
color: Colors.red,
),
],
)
],
),
Positioned(
top: size.height * .12 - 45,
child: ClipRRect(
borderRadius: BorderRadius.circular(360),
child: Container(
height: 90,
width: 90,
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
shape: BoxShape.circle, color: Colors.green),
child: ClipRRect(
borderRadius: BorderRadius.circular(360),
child: Image.network(defualtImage, fit: BoxFit.cover)),
),
)),
],
),
);

我尝试过用SingeChildScrollView和NestedScrollView包装我的红色Column小部件，但似乎什么都不起作用。

Answer 1

用SingleChildScrollView+Expanded小部件包装您想要滚动的第三个Column小部件。

Expanded(
child: SingleChildScrollView(child: Your 3rd column widget with Red background container),
),