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');
            },
          ),
        ],
      ),
    ),
  ),

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),
              ),
            )),
      ),
    ])

也许您可以改进此方法并从中进行工作。

颤振-向相反方向倒圆边框

1 个答案: