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不为BoxDecoration提供labelText（仅为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

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

Answer 3

您也可以使用位置进行如下操作

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

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

3 个答案: