在 BoxDecoration 上为容器添加 labelText（作为 TextField）答案

【问题标题】：Add labelText over BoxDecoration for Container (as TextField)在 BoxDecoration 上为容器添加 labelText（作为 TextField）
【发布时间】：2020-07-05 04:56:49
【问题描述】：

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）。

【问题讨论】：

标签： flutter

【解决方案1】：

你也可以使用位置做如下操作

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

【讨论】：

【解决方案2】：

你可以使用 InputDecorator

Container(
  child: InputDecorator(
    decoration: InputDecoration(
      labelText: 'XP',
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
    ),
    child: Text('content goes here'),
  ),
)

【讨论】：

文字与边框重叠。

【解决方案3】：

恐怕你必须使用 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),
        ),
      )

【讨论】：

如何使高度自动？