如何在flatter中向小部件添加边框？

Question

我使用的是flatter，我想给一个小部件添加一个边框（在本例中是Textwidget）。

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

Answer 1

最好的方法是使用BoxDecoration（）

有利条件

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

缺点

• 框装饰只与容器小部件一起使用，所以您想将您的小部件包装在容器（）

实例

    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 2

下面是一个扩展的答案。DecoratedBox是您需要添加边框的地方，但是我使用了容器来方便添加边距和填充。

这里是一般的设置。

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 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非常灵活。阅读颤振 — BoxEdition备忘单提供更多想法。

Answer 3

您可以将文本作为子项添加到具有框饰和边框属性的容器：

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