代码之家 › 专栏 › 技术社区 › user48956

在容器的BoxDecoration上添加labelText(作为TextField)

flutter

user48956 · 技术社区 · 5 年前

使用:

TextField(
        onTap: onTap,
        controller: controller,
        decoration: InputDecoration(
          labelText: "XP",
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(50.0),
          ),
        ));

        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 (仅适用于 InputDecoration ).

0 回复 | 直到 5 年前

LonelyWolf 5 年前

恐怕你得用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),
        ),
      )

Luxariox 4 年前

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

推荐文章

Rami Dhouib · Flutter:如果等待时间超过2秒,则执行操作

4 月前

5rod · 如何在three_js(Flutter)中设置缓冲区几何属性?

4 月前