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

Question

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

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

Answer 1

您可以将TextFielda 添加child到Container具有BoxDecorationwith border属性的a:

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

Answer 2

这是一个扩展的答案.A DecoratedBox是你需要添加边框,但我使用a是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备忘单了解更多想法.

Answer 3

您可以用它来包装DecoratedBox提供装饰的小部件：

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

Answer 4

概括

我试图总结使用borderin时的所有重要可能性BoxDecoration。

以下解释边界的结果：

说明

基本的

  Container(
    decoration: BoxDecoration(border: Border.all()),
    child: const Text("Text"),
 ),    

边框颜色、宽度和描边对齐

Container(
   decoration: BoxDecoration(
   border: Border.all(
       width: 4,
       color: Colors.green,
       strokeAlign: BorderSide.strokeAlignCenter)),
   child: const Text("Text"),
),

仅在特定一侧有边框

      Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Container(
            decoration: const BoxDecoration(
                border: Border(top: BorderSide(width: 2))),
            child: const Text("Text"),
          ),
          Container(
            decoration: const BoxDecoration(
                border: Border(bottom: BorderSide(width: 2))),
            child: const Text("Text"),
          ),
          Container(
            decoration: const BoxDecoration(
                border: Border(
                    top: BorderSide(width: 2),
                    bottom: BorderSide(width: 4))),
            child: const Text("Text"),
          ),
        ],
      ),

不同的形状

      Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Container(
            padding: const EdgeInsets.all(10),
            decoration: BoxDecoration(
                border: Border.all(),
                shape: BoxShape.circle),
            child: const Text("Text"),
          ),
          Container(
            padding: const EdgeInsets.all(10),
            decoration: BoxDecoration(
              border: Border.all(),
              borderRadius: BorderRadius.circular(10),
            ),
            child: const Text("Text"),
          ),
        ],
      ),

弯曲边界半径

    Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Container(
            padding: const EdgeInsets.all(10),
            decoration: BoxDecoration(
                border: Border.all(),
                borderRadius: const BorderRadius.horizontal(
                    left: Radius.circular(5), right: Radius.circular(20))
                ),
            child: const Text("Text"),
          ),
          Container(
            padding: const EdgeInsets.all(10),
            decoration: BoxDecoration(
                border: Border.all(),
                borderRadius: const BorderRadius.only(
                    topLeft: Radius.circular(10),
                    bottomRight: Radius.circular(20))),
            child: const Text("Text"),
          ),
        ],
      ),

Answer 5

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

用容器包裹该小部件

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

Answer 7

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

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

Answer 8

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

为什么选择使用 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 9

如文档中所述，抖动优先于组合而不是参数。在大多数情况下，您要寻找的不是属性，而是包装器（有时是一些帮助器/“构建器”）

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

也可以像@Aziza所说的那样使用Container。这是组合DecoratedBox，SizedBox和其他一些有用的小工具。

Answer 10

使用 BoxDecoration() 是显示边框的最佳方式。

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

您还可以在此处查看完整格式。

Answer 11

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

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

Answer 12

使用带有 Boxdercoration 的容器。

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