flutter - 如何在 Flutter 中实现这种布局？我尝试使用堆栈和溢出框，但它仍然看起来不一样

Question

它基本上是一个圆形容器，位于一个带有圆形边缘的容器后面。我如何在 Flutter 中做到这一点？

标签： flutteruser-interfacelayoutwidgetfrontend

Answer 1

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Stack(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.fromLTRB(20, 10, 0, 10),
              child: Container(
                width: 200,
                height: 40,
                decoration: BoxDecoration(
                  border: Border.all(
                    color: Colors.blue,
                    width: 2,
                  ),
                  borderRadius: BorderRadius.circular(15),
                ),
              ),
            ),
            Positioned(
              left: 0,
              top: 0,
              child: Container(
                width: 60,
                height: 60,
                decoration: BoxDecoration(
                  color: Colors.grey,
                  border: Border.all(
                    color: Colors.blue,
                    width: 2
                  ),
                  borderRadius: BorderRadius.circular(50),
                ),
              )
            ),
          ],
        ),
      ),
    );
  }