flutter 圆底AppBar

kiayqfof 于 2022-11-17 发布在 Flutter

关注(0)|答案(3)|浏览(164)

如何在flutter中圆化BottomAppBar我想像这样圆化左上角和右上角

bottomNavigationBar: BottomAppBar(
          color: Colors.green[200]?.withOpacity(0.8),
          child: Container(
            height: MediaQuery.of(context).size.height/9,
              child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ElevatedButton(
                style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(Colors.white),
                  shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                      RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(50))),
                ),
                onPressed: () {},
                child: Icon(
                  Icons.store,
                  color: Colors.black87,
                  size: 50,
                ),
              ),
              ElevatedButton(
                style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(Colors.white),
                  shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                      RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(50))),
                ),
                onPressed: () {},
                child: Icon(
                  Icons.home,
                  color: Colors.black87,
                  size: 50,
                ),
              ),
              ElevatedButton(
                style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(Colors.white),
                  shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                      RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(50))),
                ),
                onPressed: () {},
                child: Icon(
                  Icons.settings,
                  color: Colors.black87,
                  size: 50,
                ),
              )
            ],
          )
),
        )

flutter

来源：https://stackoverflow.com/questions/74461918/rounded-bottomappbar

3条答案

按热度按时间

pcww981p1#

您可以使用浮动操作按钮作为底栏

赞(0）回复(0）举报 2022-11-17

vqlkdk9b2#

您可以像这样使用ClipRRect：

bottomNavigationBar: ClipRRect(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(30.0),
          topRight: Radius.circular(30.0),
        ),
        child: BottomAppBar(
          color: Colors.green[200]?.withOpacity(0.8),
          child: Container(
              height: MediaQuery.of(context).size.height / 9,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  ElevatedButton(
                    style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(Colors.white),
                      shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(50))),
                    ),
                    onPressed: () {},
                    child: Icon(
                      Icons.store,
                      color: Colors.black87,
                      size: 50,
                    ),
                  ),
                  ElevatedButton(
                    style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(Colors.white),
                      shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(50))),
                    ),
                    onPressed: () {},
                    child: Icon(
                      Icons.home,
                      color: Colors.black87,
                      size: 50,
                    ),
                  ),
                  ElevatedButton(
                    style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(Colors.white),
                      shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(50))),
                    ),
                    onPressed: () {},
                    child: Icon(
                      Icons.settings,
                      color: Colors.black87,
                      size: 50,
                    ),
                  )
                ],
              )),
        ),
      ),

赞(0）回复(0）举报 2022-11-17

nwsw7zdq3#

使用ClipRRect折绕并指定每个角的半径值：

ClipRRect(
        borderRadius: const BorderRadius.only(
          bottomLeft: Radius.circular(0),
          bottomRight: Radius.circular(0),
          topLeft: Radius.circular(20),
          topRight: Radius.circular(20),
        ),
        child: BottomAppBar(
          color: Colors.green[200]?.withOpacity(0.8),
          child: Container(
              height: 60,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  ElevatedButton(
                    style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(Colors.white),
                      shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                          RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(50))),
                    ),
                    onPressed: () {},
                    child: Icon(
                      Icons.store,
                      color: Colors.black87,
                      size: 50,
                    ),
                  ),
                  ElevatedButton(
                    style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(Colors.white),
                      shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                          RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(50))),
                    ),
                    onPressed: () {},
                    child: Icon(
                      Icons.home,
                      color: Colors.black87,
                      size: 50,
                    ),
                  ),
                  ElevatedButton(
                    style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(Colors.white),
                      shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                          RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(50))),
                    ),
                    onPressed: () {},
                    child: Icon(
                      Icons.settings,
                      color: Colors.black87,
                      size: 50,
                    ),
                  )
                ],
              )),
        ),
      )),

赞(0）回复(0）举报 2022-11-17

我来回答

flutter 圆底AppBar

3条答案

相关问题

热门标签

最新问答