如何在 Flutter 中為小部件添加邊框？

Question

我正在使用 Flutter 並且我想向小部件（在本例中為Text小部件）添加邊框。

我嘗試了TextStyle和Text ，但沒有看到如何添加邊框。

Answer 1

您可以將Text作為child項添加到具有帶border屬性的BoxDecoration的Container中：

Container(
  margin: const EdgeInsets.all(15.0),
  padding: const EdgeInsets.all(3.0),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.blueAccent)
  ),
  child: Text('My Awesome Border'),
)

Answer 2

這是一個擴展的答案。 您需要一個DecoratedBox來添加邊框，但我使用Container為了方便添加邊距和填充。

這是一般設置。

Widget myWidget() {
  return Container(
    margin: const EdgeInsets.all(30.0),
    padding: const EdgeInsets.all(10.0),
    decoration: myBoxDecoration(), //             <--- BoxDecoration here
    child: Text(
      "text",
      style: TextStyle(fontSize: 30.0),
    ),
  );
}

BoxDecoration在哪里

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(),
  );
}

邊框寬度

它們的邊框寬度分別為1 、 3和10 。

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      width: 1, //                   <--- border width here
    ),
  );
}

邊框顏色

它們的邊框顏色為

• Colors.red
• Colors.blue
• Colors.green

代碼

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      color: Colors.red, //                   <--- border color
      width: 5.0,
    ),
  );
}

邊框側

這些有邊界的一面

• 左 (3.0)，上 (3.0)
• 底部 (13.0)
• 左 (blue[100], 15.0), top (blue[300], 10.0), right (blue[500], 5.0), bottom (blue[800], 3.0)

代碼

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border(
      left: BorderSide( //                   <--- left side
        color: Colors.black,
        width: 3.0,
      ),
      top: BorderSide( //                    <--- top side
        color: Colors.black,
        width: 3.0,
      ),
    ),
  );
}

邊界半徑

它們的邊界半徑分別為5 、 10和30 。

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      width: 3.0
    ),
    borderRadius: BorderRadius.all(
        Radius.circular(5.0) //                 <--- border radius here
    ),
  );
}

繼續

DecoratedBox / BoxDecoration非常靈活。 閱讀Flutter — BoxDecoration Cheat Sheet了解更多想法。

Answer 3

最好的方法是使用 BoxDecoration()

優勢

• 您可以設置小部件的邊框
• 您可以設置邊框顏色或寬度
• 您可以設置邊框的圓角
• 您可以添加小部件的陰影

缺點

• BoxDecoration僅與Container小部件BoxDecoration使用，因此您希望將小部件包裝在Container()

示例

    Container(
      margin: EdgeInsets.all(10),
      padding: EdgeInsets.all(10),
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: Colors.orange,
        border: Border.all(
            color: Colors.pink[800], // Set border color
            width: 3.0),   // Set border width
        borderRadius: BorderRadius.all(
            Radius.circular(10.0)), // Set rounded corner radius
        boxShadow: [BoxShadow(blurRadius: 10,color: Colors.black,offset: Offset(1,3))] // Make rounded corner of border
      ),
      child: Text("My demo styling"),
    )

Answer 4

正如文檔中所述，Flutter 更喜歡組合而不是參數。

大多數情況下，您不是在尋找屬性，而是在尋找包裝器（有時還有一些助手/“構建器”）。

對於邊框，您需要DecoratedBox ，它具有定義邊框的decoration屬性； 還有背景圖像或陰影。

或者，就像Aziza 所說的，您可以使用Container 。 這是DecoratedBox 、 SizedBox和一些其他有用的小部件的組合。

Answer 5

在這里，由於Text小部件沒有允許我們定義border的屬性，我們應該用一個允許我們定義邊框的小部件包裝它。 有幾種解決方案。 但最好的解決方案是在Container小部件中使用BoxDecoration 。

為什么選擇使用 BoxDecoration？

因為 BoxDecoration 提供了更多的自定義，比如定義的可能性：

一、 border又定義：

• 邊框顏色
• 邊框寬度
• 邊界半徑
• 形狀
• 還有更多...

一個例子：

   Container(
     child:Text(' Hello Word '),
     decoration: BoxDecoration(
          color: Colors.yellow,
          border: Border.all(
                color: Colors.red ,
                width: 2.0 ,
              ),
          borderRadius: BorderRadius.circular(15),
            ),
          ),

輸出：

Answer 6

使用 BoxDecoration() 是顯示邊框的最佳方式。

Container(
  decoration: BoxDecoration(
    border: Border.all(
    color: Color(0xff000000),
    width: 4,
  )),
  child: // Your child widget
),

您還可以在此處查看完整格式。

Answer 7

您可以使用 Container 來包含您的小部件：

Container(
  decoration: BoxDecoration(
    border: Border.all(
    color: Color(0xff000000),
    width: 1,
  )),
  child: Text()
),

Answer 8

使用帶有 Boxdercoration 的容器。

 BoxDecoration(
    border: Border.all(
      width: 3.0
    ),
    borderRadius: BorderRadius.circular(10.0)
  );

Answer 9

上面的答案也是正確的，但是如果你想在同一個小部件上添加多個邊框，那么你可以設置這個

Container(
      child: const Center(
        child: Text(
          'This is your Container',
        ),
      ),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: Colors.white,
        boxShadow: const [
          BoxShadow(color: Colors.green, spreadRadius: 8),
          BoxShadow(color: Colors.yellow, spreadRadius: 5),
        ],
      ),
      height: 50,
    )

Answer 10

用容器包裝那個小部件

Container(
        margin: const EdgeInsets.all(30.0),
        padding: const EdgeInsets.all(10.0),
        decoration: BoxDecoration(border: Border.all(
        color: Colors.black,
        width: 1,
      ),
    ), 
        child: Text(
          "text",
          style: TextStyle(fontSize: 30.0),
        ),
      );

Answer 11

我正在使用Flutter，我想向小部件（在本例中為Text小部件）添加邊框。

我嘗試了TextStyle和Text，但是沒有看到如何添加邊框。

Answer 12

如果有人想要輪廓/帶邊框的文本或應用多個邊框。

你可以試試這個：

https://pub.dev/packages/outlined_text

演示

Answer 13

在這種情況下，您可以將該小部件包裝到 DecoratedBox 為該小部件提供裝飾

Widget textDecoration(String text){ return DecoratedBox(decorated: BoxDecoration( border: Border.all( color: Colors.red, width: 10, ), ), child: Text(text)); }

Answer 14

帶底部陰影的圓角/邊框

Container(
 // child it's depend on your requirement
  child: const Center(
    child: Text(
      'This is your Container',
    ),
  ),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    color: Colors.white,
  boxShadow: <BoxShadow>[
       // shadow color and radius
        BoxShadow(
            color: Colors.black54,
            blurRadius: 15.0,
            offset: Offset(0.0, 0.75)
        )
      ],
  ),
  // according your height ex. 50
  height: 50,
);

Answer 15

試試下面的代碼：

Container(
  margin: margin,
  padding: padding,
  decoration: BoxDecoration(
    border: Border.all(
      color: color,
      width: width,
    ),
  ),
  child: Text(
    data,
    style: TextStyle(fontSize: 30.0),
  ),
),

Answer 16

Container(
  padding: const EdgeInsets.all(16.0),
  decoration: BoxDecoration(
    border: Border.all(),
  ),
  child: const Text(
    "FlutterService",
    style: TextStyle(fontSize: 34.0),
  ),
)

Border.all() 在容器的所有邊上創建一個黑色邊框。 它是一種非常特殊的構造函數。

參考： 如何在Flutter中給容器添加邊框

Answer 17

我試圖總結在BoxDecoration中使用border時的所有重要可能性。

基本的

  Container(
    decoration: BoxDecoration(border: Border.all()),
    child: const Text("Text"),
 ),    

---

BorderColor、寬度和 strokeAlign

Container(
   decoration: BoxDecoration(
   border: Border.all(
       width: 4,
       color: Colors.green,
       strokeAlign: BorderSide.strokeAlignCenter)),
   child: const Text("Text"),
),

---

僅在特定一側的邊框

      Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Container(
            decoration: const BoxDecoration(
                border: Border(top: BorderSide(width: 2))),
            child: const Text("Text"),
          ),
          Container(
            decoration: const BoxDecoration(
                border: Border(bottom: BorderSide(width: 2))),
            child: const Text("Text"),
          ),
          Container(
            decoration: const BoxDecoration(
                border: Border(
                    top: BorderSide(width: 2),
                    bottom: BorderSide(width: 4))),
            child: const Text("Text"),
          ),
        ],
      ),

---

不同的形狀

      Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Container(
            padding: const EdgeInsets.all(10),
            decoration: BoxDecoration(
                border: Border.all(),
                shape: BoxShape.circle),
            child: const Text("Text"),
          ),
          Container(
            padding: const EdgeInsets.all(10),
            decoration: BoxDecoration(
              border: Border.all(),
              borderRadius: BorderRadius.circular(10),
            ),
            child: const Text("Text"),
          ),
        ],
      ),

---

彎曲的邊界半徑

    Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Container(
            padding: const EdgeInsets.all(10),
            decoration: BoxDecoration(
                border: Border.all(),
                borderRadius: const BorderRadius.horizontal(
                    left: Radius.circular(5), right: Radius.circular(20))
                ),
            child: const Text("Text"),
          ),
          Container(
            padding: const EdgeInsets.all(10),
            decoration: BoxDecoration(
                border: Border.all(),
                borderRadius: const BorderRadius.only(
                    topLeft: Radius.circular(10),
                    bottomRight: Radius.circular(20))),
            child: const Text("Text"),
          ),
        ],
      ),

Answer 18

文字邊框樣式：

Stack(
  children: <Widget>[
    // Stroked text as border.
    Text(
      'Greetings, planet!',
      style: TextStyle(
        fontSize: 40,
        foreground: Paint()
          ..style = PaintingStyle.stroke
          ..strokeWidth = 6
          ..color = Colors.blue[700]!,
      ),
    ),
    // Solid text as fill.
    Text(
      'Greetings, planet!',
      style: TextStyle(
        fontSize: 40,
        color: Colors.grey[300],
      ),
    ),
  ],
)

Answer 19

您可以通過將其包裝在 Container 小部件中並指定邊框屬性來向小部件添加邊框。

以下是如何向文本小部件添加邊框的示例：

Container(
decoration: BoxDecoration(
    border: Border.all(
        color: Colors.black,
        width: 2,
    ),
),
child: Text("This text has a border"),

)

Answer 20

在容器內使用 Text 小部件並使用 decoration 為文本裝飾添加邊框：BoxDecoration( border: Border.all( color: Color(0xff000000), width: 1, )),

Answer 21

如果您想為容器的某些文本添加邊框，那么您可以通過將 BoxDecoration 應用到 Container 來輕松實現。

代碼：

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.redAccent,
      width: 1,
    ),
  ),
  child: Text('Some Text'),
);