dart - 如何使TextField的背景为矩形框形状？

Question

我尝试在 TextField 中制作具有矩形形状的 Container 小部件。它没有在容器内显示我的文本。而是盒子形状出现在 TextField 上方。

这是我的代码:

 new Container(
            height: 10.0,
            width: 20.0,
              decoration: new BoxDecoration(
                shape: BoxShape.rectangle,
                border: new Border.all(
                  color: Colors.black,
                  width: 1.0,
                ),
              ),
            child: new TextField(
              textAlign: TextAlign.center,
              decoration: new InputDecoration(
                hintText: '1',
                border: InputBorder.none,

              ),
            ),
            ),

Answer 1

只需删除容器的 height 和 width 属性即可。

例子:

   new Container(
      decoration: new BoxDecoration(
        shape: BoxShape.rectangle,
        border: new Border.all(
          color: Colors.black,
          width: 1.0,
        ),
      ),
      child: new TextField(
        textAlign: TextAlign.center,
        decoration: new InputDecoration(
          hintText: '1',
          border: InputBorder.none,

        ),
      ),
    )

或者只指定 InputDecoration 的 border 属性，如

new TextField(
      textAlign: TextAlign.center,
      decoration: new InputDecoration(
        hintText: '1',
        border: new OutlineInputBorder(
          borderRadius: const BorderRadius.all(
            const Radius.circular(0.0),
          ),
          borderSide: new BorderSide(
            color: Colors.black,
            width: 1.0,
          ),
        ),
      ),
    )

希望有帮助