flutter - 颤振 - 以相反方向圆形边框

Question

我在encubos的帮助下找到了解决这个问题的方法——非常感谢！. 可以简化代码 - 如果您以更好的方式解决此问题，请分享您的代码。

代码：

appBar: PreferredSize(
    preferredSize: Size.fromHeight(150.0),
    child: Container(
      decoration: BoxDecoration(
        border: Border(
            bottom: BorderSide(color: Colors.grey[200], width: 1.0),
            top: BorderSide(color: Colors.lightBlue, width: 1.0)
        )
      ),
      child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              width: double.infinity,
              decoration: BoxDecoration(
                color: Colors.lightBlue,
                border: Border.all(color: Colors.lightBlue, width: 0.0)
              ),
              height: 100,
            ),
            Container(
              color: Colors.lightBlue,
              child: Container(
                  width: double.infinity,
                  height: 72,
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.grey[200], width: 0.0),
                    color: Colors.grey[200],
                    borderRadius: new BorderRadius.vertical(
                      top: Radius.elliptical(150, 30),
                    ),
                  )),
            ),
          ])
    ),
  ),

结果：

我对容器底部边框的样式有问题。我的目标是旋转 180 度顶部栏的底部边框

代码：

appBar: PreferredSize(
    preferredSize: Size.fromHeight(150.0),
    child: Container(
      decoration: BoxDecoration(
        color: Colors.red,
        borderRadius: new BorderRadius.vertical(
          bottom: Radius.elliptical(150, 30)
        )),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          new InkWell(
            child: new Text(
                'app',
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontSize: 24
                )
            ),
            onTap: () {
              Navigator.of(context).pushNamed('/home');
            },
          ),
        ],
      ),
    ),
  ),

标签： flutter

Answer 1

Container解决此问题的一种可能方法是在代码中使用相同的想法，但将其应用于下面的顶部

请参阅此代码和图像。

您需要调整颜色：白色和容器的高度

Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Container(
        color: Colors.red,
        width: double.infinity,
        height: 100,
      ),
      Container(
        color: Colors.red,
        child: Container(
            width: double.infinity,
            height: 100,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: new BorderRadius.vertical(
                top: Radius.elliptical(150, 30),
              ),
            )),
      ),
    ])

也许您可以改进此方法并以此为基础。