自定义textfield ，只允许输入数字怎么弄

来源：2-2 iOS开发者如何快速上手Flutter开发

幕布斯3357744

2022-11-21

class TextInput extends StatefulWidget{

  final String title;
  final String hint;
  final ValueChanged<String>? onChanged;
  final ValueChanged<bool>? focusChanged;
  final bool lineStretch;
  final bool obscureText;
  final bool isAutoFoucs;
  final TextInputType? keyboardType;
  TextEditingController? controller;
  List<TextInputFormatter>? inputFormatters;
  
  
  TextInput(
      this.title,
      this.hint,
      { Key? key,
        this.onChanged,
        this.focusChanged,
        this.lineStretch = false,
        this.obscureText = false,
        this.isAutoFoucs=false,
        this.keyboardType,
        this.controller,
        this.inputFormatters
  }):super(key: key);


  @override
  _TextInputState createState()=>_TextInputState();

}

class _TextInputState extends State<TextInput>{
  final _focusNode = FocusNode();
  TextEditingValue? textEditingValue;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            Container(
              padding: EdgeInsets.only(left: 15),
              width: 100,
              child: Text(widget.title,style: TextStyle(fontSize: 16)),
            ),
            _input()
          ],
        )
      ],
    );
  }

  _input(){
    return Expanded(
        child:TextField(
          controller:widget.controller,
          focusNode: _focusNode,
          onChanged:widget.onChanged,
          //设置密码输入
          obscureText:widget.obscureText,
          keyboardType: widget.keyboardType,
          autofocus: widget.isAutoFoucs,
          cursorColor: primary,
          //设置只允许输入数字
          inputFormatters:widget.inputFormatters,
          style: TextStyle(fontSize:16,fontWeight:FontWeight.w300),
          //输入框的样式
          decoration: InputDecoration(
              contentPadding: EdgeInsets.only(left:20,right:20),
              border: InputBorder.none,
              hintText: widget.hint,
              hintStyle:TextStyle(fontSize: 15, color: Colors.grey)
          ),
        )
    );
  }


  @override
  void dispose() {
    _focusNode.dispose();
    super.dispose();
  }
}

我看了老师仿哔哩哔哩高级课，输入数字是用的keyboardType，这个并不能限制只输入输入，还是可以输入文字的，百度了下，使用的
inputFormatters: [
FilteringTextInputFormatter.allow(RegExp(r’[0-9]’))//设置只允许输入数字
],
正则来限制的，上面是我写的view，但是在用的时候

child:TextInput(
                  "密码",
                  "请输入密码",
                  keyboardType:TextInputType.number,
                  obscureText:true,
                  inputFormatters: 		 [FilteringTextInputFormatter.allow(RegExp(r'[0-9]'))],
                  onChanged:(text){
                    _userPassWord=text;
                  },
              )

FilteringTextInputFormatter倒入import ‘package:flutter/services.dart’;这个包之后，自定义的TextInput报下面的错，这个怎么解决呢

TextInput' isn't a function. (Documentation)  Try correcting the name to match an existing function, or define a method or function named 'TextInput'.
The name 'TextInput' is defined in the libraries 'package:flutter/src/services/text_input.dart (via package:flutter/services.dart)' and 'package:xyjc_iot/view/TextInput.dart'. (Documentation)  Try using 'as prefix' for one of the import directives, or hiding the name from all but one of the imports.

写回答

2回答

幕布斯3357744

提问者

2022-11-22

错误提示

CrazyCodeBoy

2022-11-22

写了个Demo可以运行：

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Demo1(),
    );
  }
}

class Demo1 extends StatelessWidget {
  const Demo1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("只输入整数"),),
      body: TextField(
        keyboardType: TextInputType.number,
        inputFormatters: [
          // FilteringTextInputFormatter.digitsOnly,//数字，只能是整数
          FilteringTextInputFormatter.allow(RegExp("[0-9.]")), //数字包括小数
        ],
      ),
    );
  }
}

CrazyCodeBoy

嗯，可以自己写个试试看。

2022-11-25

共4条回复

Flutter从入门到进阶实战携程网App 一网打尽核心技术

解锁Flutter开发新姿势，，系统掌握Flutter开发核心技术。

4788 学习 · 3270 问题

查看课程

相似问题

TextField 文本丢失

回答 1

TextField里面两种设置border有什么不同嘛？