边框宽度

Question

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

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

Answer 1

您可以将TextField添加为child Container BoxDecoration border属性：

new Container(
  margin: const EdgeInsets.all(15.0),
  padding: const EdgeInsets.all(3.0),
  decoration: new BoxDecoration(
    border: new Border.all(color: Colors.blueAccent)
  ),
  child: new 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）
左（蓝色[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非常灵活。阅读Flutter — BoxDecoration Cheat Sheet了解更多想法。

Answer 3

使用BoxDecoration（）是显示边框的最佳方法。

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

您还可以查看完整格式here

Answer 4

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

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

Answer 5

使用具有Boxdercoration的容器。

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

Answer 6

正如文档中所述，颤动更喜欢构图而不是参数。你大部分时间寻找的不是属性，而是一个包装器（有时是一些助手/“构建器”）

对于边框，您想要的是DecoratedBox，它具有定义边框的decoration属性;还有背景图片或阴影。

或者像@Aziza所说，你可以使用Container。哪个是DecoratedBox，SizedBox和其他一些有用的小部件的组合。

Answer 7

在这里，由于 Text 小部件不具有允许我们定义border的属性，因此我们应使用允许我们定义边境。有几种解决方案。
但是最好的解决方案是在BoxDecoration小部件中使用 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

如果有人想要轮廓/带边框的文本或应用多个边框。

你可以试试这个：

https://pub.dev/packages/outlined_text

DEMO

Answer 9

最好的方法是使用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 10

如果您想为容器的某些文本添加边框，则可以通过将 BoxDecoration 应用到容器来轻松实现。

代码：

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

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

10 个答案:

边框宽度

边框颜色

边境一侧

边界半径

继续