Question

我正在尝试为看起来像

的代码实现用户输入

当前，我所拥有的只是一个容纳一行的容器，该行包含4个容器，每个容器都包含一个TextFormField。我如何实现以上

   Padding(
     padding: const EdgeInsets.all(8.0),
         child: new Form(
            child: Container(
               color: Colors.blue[100],
               height: 100.0,
               width: 350.0,
               child: Row(
                  mainAxisAlignment:
                      MainAxisAlignment.spaceEvenly,
                      children: <Widget>[
                        Container(
                         color: Colors.amber,
                         height: 50.0,
                         width: 50.0,
                         child: TextFormField(),
                          ),

                          Container(
                            color: Colors.amber,
                            height: 50.0,
                            width: 50.0,
                            child: TextFormField(),
                             ),
                           Container(
                           color: Colors.amber,
                           height: 50.0,
                           width: 50.0,
                            child: TextFormField(),
                            ),
                            Container(
                           color: Colors.amber,
                           height: 50.0,
                           width: 50.0,
                            child: TextFormField(),
                            ),

                      ),
                                  ],

Answer 1

我创建了this个小例子，我认为这将帮助您实现相同的思想并进行总结：

您需要使用TextField将焦点从FoucusNode更改为另一个焦点
您可以从装饰属性中更改边框和其他装饰设置，但是如果要更改颜色，最好使用Theme小部件并从那里更改主题
如果您想使用户不要输入更多内容，那么一位租船人可以使用LengthLimitingTextInputFormatter

您还可以从装饰中获得圆角并指定边框半径

decoration: InputDecoration(
    contentPadding: const EdgeInsets.all(8.0),
    border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(5.0),
    ),
    hintText: "0",
),

在Flutter中创建带有圆角且没有ActivationIndicator的TextFormField

1 个答案: