flutter 如何分割文本表单字段以便键入由字母和数字组成的车辆编号

sr4lhrrt 于 2022-12-24 发布在 Flutter

关注(0)|答案(1)|浏览(102)

有人能告诉我如何在文本字段表单的SplittedBox中输入文本吗？文本字段表单由字母和数字组成，你能给予一些关于文本的想法吗？
我试过几种方法，但都没用
下面是我源代码：

Container(
                                 color: Colors.grey[200],
                                 padding: EdgeInsets.all(20),
                                child: Column(
                                  mainAxisSize: MainAxisSize.min,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(
                                   "Vehicle Number:",
                                    style: TextStyle(
                                   fontWeight: FontWeight.bold,
                                   ),
                                  ),
                                    Padding(
                                      padding: const EdgeInsets.all(10),
                                      child: TextFormField(
                                        controller: vehicleNo,
                                        style: const TextStyle(
                                            fontWeight: FontWeight.bold),
                                        decoration: InputDecoration(
                                          border: UnderlineInputBorder(
                                            borderRadius:
                                                BorderRadius.circular(5.0),
                                            borderSide: const BorderSide(
                                              width:  0,
                                              style: BorderStyle.none,
                                            ),
                                          ),
                                          fillColor: Colors.white,
                                          filled: true,
                                          //labelText: 'Vehicle Number.*',
                                          contentPadding:
                                              const EdgeInsets.symmetric(
                                                  vertical: 10.0,
                                                  horizontal: 10.0),
                                        ),
                                        validator: (value) {
                                          if (value == null || value.isEmpty) {
                                            return 'Please enter vehicle number';
                                          } else {

如果你能推荐我，我将不胜感激。

flutter

来源：https://stackoverflow.com/questions/74899121/how-can-split-the-text-form-feild-inorder-to-type-vehicle-number-that-consist-of

1条答案

按热度按时间

0wi1tuuw1#

我写了一个简单的类：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class SplitInput extends StatefulWidget {
  final String format; // example '2d 2d 3s' => 2 digits + 2 digits + 3 String(with 3 length)
  const SplitInput({required this.format});

  @override
  State<SplitInput> createState() => _SplitInputState();
}

class _SplitInputState extends State<SplitInput> {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        ...cells(),
      ],
    );
  }

  cells() {
    List<Widget> cellList = [];
    final listOfCells = widget.format.split(' ');
    for (String element in listOfCells) {
      final type = element[0];
      final flex = int.parse(element.substring(1, element.length));
      final controller = TextEditingController();
      cellList.add(
        Expanded(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              decoration: BoxDecoration(
                color: Colors.black12,
                borderRadius: BorderRadius.circular(15),
              ),
              child: TextField(
                controller: controller,
                decoration: InputDecoration(
                  counter: Container(),
                  focusedBorder: InputBorder.none,
                  border: InputBorder.none,
                ),
                textInputAction: TextInputAction.next,
                textAlign: TextAlign.center,
                keyboardType:
                    type == 's' ? TextInputType.text : TextInputType.number,
                maxLength: flex,
              ),
            ),
          ),
          flex: flex,
        ),
      );
    }
    return cellList;
  }
}

你可以自定义它。你可以很容易地使用如下：

SplitInput(format: 'd2 d2 s4 d2')

d是digit，s是String，在它们之后，您应该写入它们的length并按空格分隔。
输出如下所示：

赞(0）回复(0）举报 2022-12-24

我来回答

flutter 如何分割文本表单字段以便键入由字母和数字组成的车辆编号

1条答案

相关问题

热门标签

最新问答