logo标签列表

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

androidiosflutterdartuser-interface
553

我正在使用Flutter，希望给小部件（在这种情况下是Text小部件）添加边框。

我尝试过TextStyle和Text，但我没有看到如何添加边框。

20个回答
6

使用带有BoxDecoration的容器。

 BoxDecoration(
    border: Border.all(
      width: 3.0
    ),
    borderRadius: BorderRadius.circular(10.0)
  );
1
这并没有超过3年前被接受的答案。 - nvoigt
4
3
你可以通过三个边框来实现底部圆角。
Stack(
children: [
  Container(
    decoration: BoxDecoration(
      border: Border.all(color: Colors.red, width: 2),
      borderRadius: const BorderRadius.only(
        topLeft: Radius.zero,
        topRight: Radius.zero,
        bottomLeft: Radius.circular(20),
        bottomRight: Radius.circular(20),
      ),
    ),
    child: Padding(
      padding: const EdgeInsets.all(20.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const SizedBox(
            height: 1,
          ),
          Text("Dummy text"),
          const SizedBox(
            height: 10,
          ),
        ],
      ),
    ),
  ),
  Padding(
    padding: const EdgeInsets.only(left: 2, right: 2),
    child: Container(
      color: AppColors.highLighterBg,
      width: size.width,
      height: 10,
    ),
  )
],

);

2

使用底部阴影实现圆角/边框

Container(
 // child it's depend on your requirement
  child: const Center(
    child: Text(
      'This is your Container',
    ),
  ),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    color: Colors.white,
  boxShadow: <BoxShadow>[
       // shadow color and radius
        BoxShadow(
            color: Colors.black54,
            blurRadius: 15.0,
            offset: Offset(0.0, 0.75)
        )
      ],
  ),
  // according your height ex. 50
  height: 50,
);
2

文本边框样式：

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],
      ),
    ),
  ],
)
2
请尝试以下代码：
Container(
  margin: margin,
  padding: padding,
  decoration: BoxDecoration(
    border: Border.all(
      color: color,
      width: width,
    ),
  ),
  child: Text(
    data,
    style: TextStyle(fontSize: 30.0),
  ),
),
2
如果您想为容器中的某些文本添加边框，则可以通过将BoxDecoration应用于Container来轻松实现。
代码：
```dart Container( decoration: BoxDecoration( border: Border.all( color: Colors.black, width: 2.0, ), ), child: Text('Some Text'), ) ```
Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.redAccent,
      width: 1,
    ),
  ),
  child: Text('Some Text'),
);
1

在容器内使用文本小部件，使用装饰来边框化文本：

decoration: BoxDecoration(
    border: Border.all(
    color: Color(0xff000000),
    width: 1,
)),
答案需要进行一些格式化。 - Cavin Macwan
1

是的，有不同的方法可以实现。其中之一是：将其包装在容器中。并使用类似于以下的盒子装饰。

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),
  ),
)
1
你可以使用这种方法为容器添加边框颜色。
Container(
      height: height * 0.06,
      width: width,
      alignment: Alignment.center,
      decoration: BoxDecoration(
        border: Border.all(
          color: primaryColor,
        ),
        borderRadius: BorderRadius.circular(10),
      ),
      child: Text(
        "data",
        style: const TextStyle(
          fontWeight: FontWeight.bold
        ),
      ),
    );
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接