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

Question

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 不提供 labelText for BoxDecoration(only for InputDecoration)。

Answer 1

您可以使用 InputDecorator

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

Answer 2

我会选择 Luxiriox
的 ans ，只需在 enableBorder 中更改一次边界

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

Answer 3

如何像 TextField 一样在 Container 的 BoxDecoration 上添加 MabelText：

遇到这个并认为它可能会有所帮助。使用 TextField 并将 readOnly 设置为“True”；// 这将禁用点击功能，使用户无法更改其中的项目，但您可以根据需要显示结果。

在我的示例中，我在无状态小部件中设置了结果，以从方法返回结果。

class TextField_resultBx extends StatelessWidget {
  const TextField_resultBx({
    Key? key,
    required this.boxResultTitle,
    required this.borderLabelTextBox,
    required this.displayBoxResult,
  }) : super(key: key);

  final String boxResultTitle;
  final String borderLabelTextBox;
  final String displayBoxResult;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            boxResultTitle,
            textScaleFactor: 1.2,
            softWrap: true,
            style: const TextStyle(
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 10),
          // Results Box 1:
          TextField(
            // enabled: true,
            readOnly: true,
            style: const TextStyle(
              color: kCalLabelColor,
            ),
            decoration: InputDecoration(
              enabled: true,
              contentPadding: const EdgeInsets.all(12.0),
              floatingLabelBehavior: FloatingLabelBehavior.always,
              // Border Label TextBox 1
              labelText: borderLabelTextBox,
              labelStyle: const TextStyle(
                fontWeight: FontWeight.bold,
                color: kCalLabelColor,
              ),
              hintText: displayBoxResult,

              hintMaxLines: 2,
              hintStyle: const TextStyle(
                color: Colors.black,
              ),
              enabledBorder: OutlineInputBorder(
                borderSide: kEnbBorderSide,
                borderRadius: kCalOutlineBorderRad,
              ),
              focusedBorder: kFocusedBorder,
            ),
          ),
        ],
      ),
    );
  }
}