如何在FloatingActionButton上制作邊框？-有解無憂

我的問題是我想在我的浮動操作按鈕周圍做邊框。我試圖將它放入容器并這樣做，但這不是我想要的。

        decoration: BoxDecoration(
            border: Border.all(
                color: Colors.brown, width: 5, style: BorderStyle.solid)),
        margin: const EdgeInsets.fromLTRB(0, 0, 0, 55),
        width: 80,
        height: 80,
        child: FloatingActionButton(
          focusColor: Colors.white54,
          backgroundColor: Colors.white,
          onPressed: () {},
          child: const Icon(
            Icons.add,
            color: Colors.black,
            size: 50,
          ),
        ),
      ),

我有這個：

如何在 FloatingActionButton 上制作邊框？

我要這個：

如何在 FloatingActionButton 上制作邊框？

uj5u.com熱心網友回復：

只是使用 shape: BoxShape.circle,

Container(
      decoration: BoxDecoration(
        shape: BoxShape.circle,
          border: Border.all(
              color: Colors.brown, width: 5, style: BorderStyle.solid)),
      margin: const EdgeInsets.fromLTRB(0, 0, 0, 55),
      width: 80,
      height: 80,
      child: FloatingActionButton(
        focusColor: Colors.white54,
        backgroundColor: Colors.white,
        onPressed: () {},
        child: const Icon(
          Icons.add,
          color: Colors.black,
          size: 50,
        ),
      ),

    )

輸出：

如何在 FloatingActionButton 上制作邊框？

uj5u.com熱心網友回復：

試試下面的代碼

   Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(
                    80,
                  ),
                  border: Border.all(
                    color: Colors.green,
                    width: 5,
                    style: BorderStyle.solid,
                  ),
                ),
                margin: const EdgeInsets.fromLTRB(0, 0, 0, 55),
                width: 80,
                height: 80,
                child: FloatingActionButton(
                  focusColor: Colors.white54,
                  backgroundColor: Colors.white,
                  onPressed: () {},
                  child: const Icon(
                    Icons.add,
                    color: Colors.black,
                    size: 50,
                  ),
                ),
              ),

結果畫面-> 如何在 FloatingActionButton 上制作邊框？

uj5u.com熱心網友回復：

在您命名的FloatingActionButton小部件中，您可以使用它來實作您想要的結果。propertyshape

   FloatingActionButton(
          backgroundColor: Colors.white,
          onPressed: (){},
          child: Icon(Icons.add,color: Colors.black,size: 30,),
          shape: RoundedRectangleBorder(side: BorderSide(width: 3,color: Colors.brown),borderRadius: BorderRadius.circular(100)),
        )

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/395308.html

標籤：扑用户界面

上一篇：如何分組或阻止一行代碼

下一篇：使用listviewbuilder時SliverAppBar不會折疊