圓底AppBar

如何在顫動中將 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,
                ),
              )
            ],
          )
),
        )

uj5u.com熱心網友回復：

您可以使用浮動操作按鈕作為底欄

uj5u.com熱心網友回復：

您可以像這樣使用 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,
                    ),
                  )
                ],
              )),
        ),
      ),

uj5u.com熱心網友回復：

為每個角包裹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,
                    ),
                  )
                ],
              )),
        ),
      )),
   

標籤：扑镖

上一篇：Flutter-是否推薦使用dispose()textControllers？

下一篇：如何在ListView.builder中擴展文本？