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

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


当前回答

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

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

其他回答

下面是一个扩展的答案。一个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在哪里

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

Code

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)

Code

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非常灵活。阅读颤振箱装饰小抄更多的想法。

文本边框样式:

Stack(
  children: <Widget>[
    // Stroked text as border.
    Text(
      'Greetings, planet!',
      style: TextStyle(
        fontSize: 40,
        foreground: Paint()
          ..style = PaintingStyle.stroke
          ..strokeWidth = 6
          ..color = Colors.blue[700]!,
      ),
    ),
    // Solid text as fill.
    Text(
      'Greetings, planet!',
      style: TextStyle(
        fontSize: 40,
        color: Colors.grey[300],
      ),
    ),
  ],
)

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

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

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

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

代码:

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