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

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


当前回答

你可以把那个小部件包装到DecoratedBox,在这种情况下,DecoratedBox为那个小部件提供装饰

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

其他回答

使用带有Boxdercoration的容器。

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

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

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

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

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

是的,有不同的方法。其中之一是: 用容器包起来。像这样用盒子装饰。

Container(
  padding: const EdgeInsets.all(16.0),
  decoration: BoxDecoration(
    border: Border.all(width: 5, color: Colors.red),
    borderRadius: BorderRadius.all(Radius.circular(50)),
  ), 
  child: const Text(
    "Box decoration",
    style: TextStyle(fontSize: 34.0),
  ),
)

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

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

你可以将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'),
)