我正在使用Flutter,我想向小部件(在本例中是文本小部件)添加边框。

我尝试了TextStyle和文本,但我不知道如何添加边框。


当前回答

你可以将Text作为子元素添加到带有边框属性的BoxDecoration容器中:

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

其他回答

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

大多数情况下,您不是在寻找属性,而是在寻找包装器(有时还需要一些助手/“构建器”)。

对于边界,你需要DecoratedBox,它有一个定义边界的装饰属性;也包括背景图像或阴影。

或者,就像Aziza说的,你可以使用Container。这是DecoratedBox, SizedBox和其他一些有用的小部件的组合。

如果你想添加边框的一些文本的容器,那么你可以很容易地通过应用BoxDecoration容器。

代码:

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

在这里,由于Text小部件没有允许我们定义边框的属性,我们应该用一个允许我们定义边框的小部件来包装它。 有几种解决方案。 但是最好的解决方案是在容器小部件中使用BoxDecoration。

为什么选择使用BoxDecoration?

因为BoxDecoration提供了更多的定制,比如定义:

首先,边界和也定义:

边框颜色 边框宽度 边界半径 形状 还有更多……

一个例子:

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

输出:

试试下面的代码:

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

用容器包装小部件

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