Question

我正在尝试创建一个在顶部中间带有曲线的容器，然后在该曲线内放置一个圆形按钮。它看起来应该类似于Flutter的Curved Navigation Bar软件包，只是没有动画。

我尝试过使用Stack and Positioned，但是Flutter并没有按照我的想象将其转换。

class CurvedContainerWithButtonAtTopCenter extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
   // TODO: implement build
    return Scaffold(
    body: Container(
      height: 200.0,
      child: Stack(
        children: <Widget>[
          Positioned(
             top: 30.0,
             right: 0.0,
             left: 0.0,
             child: Container(
                height: 170.0,
                width: MediaQuery.of(context).size.width,
                margin: EdgeInsets.symmetric(horizontal: 20.0, vertical:                 
                40.0),
                color: Colors.blue,
          )),
      Container(
        height: 60.0,
        width: 60.0,
        decoration: BoxDecoration(
        color: Colors.white,
        shape: BoxShape.circle),
        alignment: FractionalOffset.center,
        child: Container(
          margin: EdgeInsets.all(10.0),
          child: FloatingActionButton(),
        )
      )
    ],
  )
)
);
 }
}

我希望容器能占据整个宽度，并定位得更低一些。圆应位于容器顶部边界的中心。 Circle还应包含一个FloatingActionButton。

Answer 1

我希望您现在已经找到答案，以防万一……下面您可以找到一个可能的解决方案：

构建功能

 Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
          child: Text('Hello'),
        ),
        bottomNavigationBar: _navigationDrawer,
        floatingActionButton: FloatingActionButton(
            backgroundColor: Colors.orange,
            child: Icon(Icons.add),
            onPressed: () {}),
        floatingActionButtonLocation:
            FloatingActionButtonLocation.centerDocked);
}

用于底部导航的获取器

 Widget get _navigationDrawer {
    return Container(
      height: 80.0,
      child: BottomAppBar(
          shape: CircularNotchedRectangle(),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.home),
                onPressed: () {},
              ),
              Padding(
                padding: const EdgeInsets.only(right: 50),
                child: IconButton(
                  icon: Icon(Icons.search),
                  onPressed: () {},
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(left: 50),
                child: IconButton(
                  icon: Icon(Icons.note_add),
                  onPressed: () {},
                ),
              ),
              IconButton(
                icon: Icon(Icons.portrait),
                onPressed: () {},
              ),
            ],
          )),
    );
  }

结果

希望这会有所帮助:)编码愉快!!!

弧形容器，Flutter顶部带有圆形按钮

1 个答案: