为容器添加基于BoxDecoration的labelText (作为TextField)
为容器添加基于BoxDecoration的labelText (作为TextField)
提问于 2020-03-25 00:38:06
TextField有一个很好的方法来在它的盒子装饰上放置一个文本标签。
通过以下方式：
TextField(
onTap: onTap,
controller: controller,
decoration: InputDecoration(
labelText: "XP",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(50.0),
),
));有没有办法在容器的其他BoxDecoration上实现同样的效果？例如，我想指定标签"XP"：
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
border: Border.all(color: color, width: 2.0),
labelText: Text("XP"), // No such attribute
),
child: child,
),..。但是Flutter没有为BoxDecoration提供labelText (仅用于InputDecoration)。
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-03-25 00:47:02
恐怕您必须使用Stack来做一些不同的操作
Stack(
children: <Widget>[
Container(
height: 80,
),
Positioned(
bottom: 0,
child: Container(
width: 250,
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
border: Border.all(color: Colors.black, width: 2.0),
),
),
),
Positioned(
left: 10,
bottom: 40,
child: Container(color: Colors.white, child: Text('XP')),
)
],
)输出
您还可以创建自定义容器小部件，并以与容器相同的方式调用它
我的自定义容器
class CustomContainer extends StatelessWidget {
final String labelText;
final BoxDecoration decoration;
const CustomContainer({this.labelText, this.decoration});
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Container(
height: 80,
),
Positioned(
bottom: 0,
child: Container(width: 250, height: 50, decoration: decoration),
),
Positioned(
left: 10,
bottom: 40,
child: Container(color: Colors.white, child: Text('XP')),
)
],
);
}
}随心所欲地调用它
CustomContainer(
labelText: 'XP',
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
border: Border.all(color: Colors.black, width: 2.0),
),
)Stack Overflow用户
发布于 2020-09-16 17:48:31
您可以使用InputDecorator
Container(
child: InputDecorator(
decoration: InputDecoration(
labelText: 'XP',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
child: Text('content goes here'),
),
)Stack Overflow用户
发布于 2021-05-07 12:53:28
您还可以使用position执行以下操作
Stack(
children: [
Container(
height: 88,
width: 88,
child: ImagePickerWidget(
diameter: 180,
initialImage: "${snapshot.data['imagePath']}",
shape: ImagePickerWidgetShape
.circle, // isEditable: true,
),
),
Positioned(
left: 5,
bottom: 28,
child: Container(
color: Colors.transparent,
child: Text(
'Double Tap\nto Call',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.normal),
)),
)
],
)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60835412
复制相关文章
相似问题