Question

我想准备一个布局，看起来像this link中的图像。在此，首页（白色）应包含其他控件，而底部控件（另一种颜色）应包含标题。首页包含一些TextField。因此，当键盘出现或用户向上滑动时，两个页面之间的边界应该理想地向上移动。

我尝试通过以下方式使用带有带有弯角容器的Container的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(),
      ),
    ])

Answer 1

将列中的文本字段和单个子滚动视图中的该列包装起来

Answer 2

如果您想要获得图片中的形状，BorderRadius将无济于事，因为除了圆角之外，还有其他东西。您需要绘制Path并使用它来构建CustomClipper，以便可以将彩色的Container裁剪为所需的形状。

想象一下，在构建Path时您正在使用精确的坐标进行绘制，并且有不同的绘制方法。这里的大小表示将ClipPath作为子项的小部件的大小。

class CurveClipper extends CustomClipper<Path>{
  @override
  Path getClip(Size size){
    Path path = Path()
      // set the "current point"
      ..addArc(Rect.fromLTWH(0, 0, size.width/4, size.width/4), math.pi, -1.57)
      ..lineTo(9 * size.width / 10, size.width / 4)
      ..addArc(Rect.fromLTWH(3 * size.width / 4,  size.width / 4, size.width/4, size.width/4), math.pi + 1.57, 1.57)
      ..lineTo(size.width, 0)
      ..lineTo(0, 0)
      ..lineTo(0, size.width/8);
      return path;
  }

  @override
  bool shouldReclip(oldCliper) => false;
}

我用ClipPath裁剪了蓝色部分，并将其放在Container小部件中的白色Stack前面。 Stack小部件会展开以覆盖其父屏幕大小Container，因此，上面显示的getClip()函数中的大小是指屏幕大小。

Container(
  width: MediaQuery.of(context).size.width,
  height: MediaQuery.of(context).size.height,
  child: Stack(
    fit: StackFit.expand,
    children: <Widget>[
      Container(constraints: BoxConstraints.expand(), color: Colors.white),
      ClipPath(
        clipper: CurveClipper(),
        child: Container(
          constraints: BoxConstraints.expand(),
          color: Colors.blue[900]
        )
      ),
    ],
  )
),

结果

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

2 个答案: