如何在 Flutter 中为小部件添加边框？

Question

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

我尝试了 TextStyle 和 Text，但我没有看到如何添加边框。

Answer 1

您可以将 Text 作为 child 添加到具有 BoxDecoration 和 border 的 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

如文档中所述，Flutter 更喜欢组合而不是参数。

大多数时候你不是在寻找属性，而是在寻找包装器（有时是一些助手/“构建器”）。

对于边框，您需要 DecoratedBox，它有一个 decoration 属性来定义边框；还有背景图像或阴影。

或者，如，您可以使用 Container。这是 DecoratedBox、SizedBox 和其他一些有用的小部件的组合。

Answer 3

这是一个扩展的答案。 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)
左（蓝[100], 15.0），上（蓝[300], 10.0），右（蓝[500], 5.0），下（蓝[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 are very flexible. Read Flutter — BoxDecoration Cheat Sheet 更多想法。

Answer 4

最好的方法是使用 BoxDecoration()

优势

您可以设置小部件的边框
您可以设置边框颜色或宽度
您可以设置边框的圆角
您可以添加一个阴影一个小部件

缺点

BoxDecoration 仅与 Container 小部件一起使用，因此您想将小部件包装在 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 5

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

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

Answer 6

使用带有 Boxdercoration 的容器。

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

Answer 7

这里，由于 Text 小部件没有允许我们定义 border 的属性，我们应该将其包装起来使用允许我们定义边框的小部件。有几种解决方案。但最好的解决方案是使用 BoxDecoration in the Container 小部件。

为什么选择使用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 8

如果你想给容器的某些文本添加边框，那么你可以通过将 BoxDecoration 应用于容器来轻松地做到这一点。

代码：

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

Answer 9

以防有人想要 outlined/bordered 文本或应用多个边框。

你可以试试这个：

https://pub.dev/packages/outlined_text

DEMO

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

在这种情况下，您可以将该小部件包装到为该小部件提供装饰的 DecoratedBox

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

Answer 12

上面的答案也是正确的，但是如果你想在同一个小部件上添加多个边框，那么你可以这样设置

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,
    )

如何在 Flutter 中为小部件添加边框？

How can I add a border to a widget in Flutter?

border

dart

flutter

flutter-widget

边框宽度

边框颜色

边界

边框半径

进行中