时间戳

首页 > 解决方案 > 如何在颤动中创建分层可滚动页面？

flutter - 如何在颤动中创建分层可滚动页面？

问题描述

我想准备一个看起来像这个链接中的图像的布局。在这种情况下，首页（白色）应包含其他小部件，而底部小部件（其他颜色）将包含标题。首页包含一些文本字段。因此，当键盘出现或用户向上滑动时，理想情况下，两个页面之间的边界应该向上移动。

我尝试通过以下方式使用带有弯曲角的容器的 Stack 小部件来制作它，但效果不佳。

Stack(children: [
      Container(
        color: Colors.white,
      ),
      Container(
          margin: EdgeInsets.only(top: 200), color: Color(0xFF181D3D)),
      Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.only(bottomLeft: Radius.circular(100)),
          color: Color(0xFF181D3D),
        ),
        height: 200,
        child: Heading(),
      ),
      Container(
        margin: EdgeInsets.only(top: 200),
       decoration: BoxDecoration(color: Colors.black),
        child: Contents(),
      ),
    ])

标签： flutter

解决方案

将文本字段包装在列中，并将该列包装在单个子滚动视图中

推荐阅读