如何使用 flutter 小部件实现虚线文本字段

Question

我对如何实现虚线文本字段感到困惑，例如使用 flutter 小部件附加的图像。我搜索了文本字段 class 但无法提出解决方案。如有任何帮助，我们将不胜感激

Answer 1

好吧，我有相同的布局要求。所以我用了这个

它的位长，我猜是乱七八糟的（因为你需要用填充来播放）但确实有用。

输出

代码

Container(
        padding: EdgeInsets.only(left: 25.0, right: 25.0),
        width: MediaQuery.of(context).size.width,
        height: 45.0,
        child: new Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            new Flexible(
                child: new Container(
                    padding: EdgeInsets.only(left: 5.0),
                    child: new TextField(
                      decoration: InputDecoration(
                          focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: Colors.black))),
                      maxLength: 1,
                    ))),
            new SizedBox(width: 10.0),
            new Flexible(
                child: new Container(
                    padding: EdgeInsets.only(left: 5.0),
                    child: new TextField(
                      decoration: InputDecoration(
                          focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: Colors.black))),
                      maxLength: 1,
                    ))),
            new SizedBox(width: 10.0),
            new Flexible(
                child: new Container(
                    padding: EdgeInsets.only(left: 5.0),
                    child: new TextField(
                      decoration: InputDecoration(
                          focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: Colors.black))),
                      maxLength: 1,
                    ))),
            new SizedBox(width: 10.0),
            new Flexible(
                child: new Container(
                    padding: EdgeInsets.only(left: 5.0),
                    child: new TextField(
                      decoration: InputDecoration(
                          focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: Colors.black))),
                      maxLength: 1,
                    ))),
            new SizedBox(width: 10.0),
            new Flexible(
                child: new Container(
                    padding: EdgeInsets.only(left: 5.0),
                    child: new TextField(
                      decoration: InputDecoration(
                          focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: Colors.black))),
                      maxLength: 1,
                    ))),
          ],
        ),
      )

如何使用 flutter 小部件实现虚线文本字段

How to achieve dashed textfield using flutter widgets

textfield

dart

flutter

flutter-layout