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

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


当前回答

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

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

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

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

其他回答

如果有人想要一个概述/边界文本或应用多个边界。

你可以试试这个:

https://pub.dev/packages/outlined_text

DEMO

你可以使用Container来包含你的小部件:

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

最好的方法是使用BoxDecoration()

优势

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

缺点

BoxDecoration只与容器小部件一起使用,所以你需要将小部件包装在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"),
    )

使用容器中的文本小部件,并使用装饰来边框文本 装饰:BoxDecoration ( 边界:Border.all ( 颜色:颜色(0 xff000000), 宽度:1、 )),

试试下面的代码:

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