使特定的小部件可滚动

Question

我的页面有 3 个部分 Blue green and red Section

我想要的是如何使红色部分可滚动，同时其他部分将卡在原位

这是我的小部件树

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 小部件包装您想要滚动的第 3 个 Column 小部件。

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

使特定的小部件可滚动

Make a specific Widget Scrollable

scrollable

flutter