จะสร้างช่องใส่ตัวเลขใน Flutter ได้อย่างไร?

ฉันไม่พบวิธีสร้างช่องป้อนข้อมูลใน Flutter ที่จะเปิดแป้นพิมพ์ตัวเลข เป็นไปได้ด้วยวิดเจ็ตวัสดุ Flutter หรือไม่? การสนทนาเกี่ยวกับ github บางรายการดูเหมือนจะระบุว่านี่เป็นคุณสมบัติที่รองรับ แต่ฉันไม่พบเอกสารใด ๆ เกี่ยวกับเรื่องนี้

คุณสามารถระบุตัวเลขเป็นkeyboardTypeสำหรับTextFieldโดยใช้:

keyboardType: TextInputType.number

ตรวจสอบไฟล์ main.dart ของฉัน

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      home: new HomePage(),
      theme: new ThemeData(primarySwatch: Colors.blue),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new HomePageState();
  }
}

class HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.white,
      body: new Container(
          padding: const EdgeInsets.all(40.0),
          child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new TextField(
            decoration: new InputDecoration(labelText: "Enter your number"),
            keyboardType: TextInputType.number,
            inputFormatters: <TextInputFormatter>[
    FilteringTextInputFormatter.digitsOnly
], // Only numbers can be entered
          ),
        ],
      )),
    );
  }
}

สำหรับผู้ที่กำลังมองหาการสร้างTextFieldหรือTextFormFieldยอมรับตัวเลขเป็นอินพุตให้ลองใช้โค้ดบล็อกนี้:

TextFormField(
    controller: _controller,
    keyboardType: TextInputType.number,
    inputFormatters: <TextInputFormatter>[
        WhitelistingTextInputFormatter.digitsOnly
    ],
    decoration: InputDecoration(
        labelText:"whatever you want", 
        hintText: "whatever you want",
        icon: Icon(Icons.phone_iphone)
    )
)

ด้วยตัวเลือกนี้คุณสามารถ จำกัด อักขระอื่นอย่างเข้มงวดโดยไม่ต้องใช้หมายเลข

 inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],
 keyboardType: TextInputType.number,

สำหรับการใช้ตัวเลือกข้างต้นคุณต้องนำเข้าสิ่งนี้

import 'package:flutter/services.dart';

การใช้ตัวเลือกประเภทนี้ผู้ใช้ไม่สามารถวางถ่านในช่องข้อความได้

ตั้งค่าแป้นพิมพ์และตัวตรวจสอบความถูกต้อง

String numberValidator(String value) {
  if(value == null) {
    return null;
  }
  final n = num.tryParse(value);
  if(n == null) {
    return '"$value" is not a valid number';
  }
  return null;
}

new TextFormField(
    keyboardType: TextInputType.number, 
    validator: numberValidator, 
    textAlign: TextAlign.right
    ...

• https://docs.flutter.io/flutter/material/TextFormField/TextFormField.html
• https://docs.flutter.io/flutter/services/TextInputType-class.html

สำหรับผู้ที่ต้องการทำงานกับรูปแบบเงินในช่องข้อความ:

ใช้เฉพาะ:, (ลูกน้ำ)และ. (ระยะเวลา)

และบล็อกสัญลักษณ์: - (ยัติภังค์ลบหรือเส้นประ)

เช่นเดียวกับ: ⌴ (ช่องว่าง)

ใน TextField ของคุณเพียงตั้งรหัสต่อไปนี้:

keyboardType: TextInputType.numberWithOptions(decimal: true),
inputFormatters: [BlacklistingTextInputFormatter(new RegExp('[\\-|\\ ]'))],

เครื่องหมายยัติภังค์และช่องว่างจะยังคงปรากฏในแป้นพิมพ์ แต่จะถูกบล็อก

คุณสามารถใช้สองแอตทริบิวต์นี้ร่วมกับ TextFormField

 TextFormField(
         keyboardType: TextInputType.number
         inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],

อนุญาตให้ใส่ตัวเลขเท่านั้นไม่มีอย่างอื่น ..

https://api.flutter.dev/flutter/services/TextInputFormatter-class.html

คุณสามารถเปลี่ยนประเภทอินพุตได้อย่างง่ายดายโดยใช้พารามิเตอร์keyboardTypeและคุณมีความเป็นไปได้มากมายให้ตรวจสอบเอกสารTextInputType เพื่อให้คุณสามารถใช้หมายเลขหรือค่าโทรศัพท์ได้

 new TextField(keyboardType: TextInputType.number)

คุณสามารถลองสิ่งนี้:

TextFormField(
     keyboardType: TextInputType.number,
     decoration: InputDecoration(
              prefixIcon: Text("Enter your number: ")
     ),
     initialValue: "5",
     onSaved: (input) => _value = num.tryParse(input),
),

keyboardType: TextInputType.number จะเปิดแป้นตัวเลขเพื่อโฟกัสฉันจะล้างช่องข้อความเมื่อผู้ใช้ป้อน / วางสิ่งอื่นใด

keyboardType: TextInputType.number,
onChanged: (String newVal) {
    if(!isNumber(newVal)) {
        editingController.clear();
    }
}

// Function to validate the number
bool isNumber(String value) {
    if(value == null) {
        return true;
    }
    final n = num.tryParse(value);
    return n!= null;
}

นี่คือรหัสสำหรับแป้นพิมพ์โทรศัพท์จริงบน Android:

ส่วนสำคัญ: keyboardType: TextInputType.phone,

  TextFormField(
    style: TextStyle(
      fontSize: 24
    ),
    controller: _phoneNumberController,
    keyboardType: TextInputType.phone,
    decoration: InputDecoration(
      prefixText: "+1 ",
      labelText: 'Phone number'),
    validator: (String value) {
      if (value.isEmpty) {
        return 'Phone number (+x xxx-xxx-xxxx)';
      }
      return null;
    },
  ),

นี่คือรหัสสำหรับแป้นพิมพ์ตัวเลข: keyboardType: TextInputType.phone เมื่อคุณเพิ่มรหัสนี้ในช่องข้อความแป้นพิมพ์ตัวเลขจะเปิดขึ้น

  final _mobileFocus = new FocusNode();
  final _mobile = TextEditingController();


     TextFormField(
          controller: _mobile,
          focusNode: _mobileFocus,
          maxLength: 10,
          keyboardType: TextInputType.phone,
          decoration: new InputDecoration(
            counterText: "",
            counterStyle: TextStyle(fontSize: 0),
            hintText: "Mobile",
            border: InputBorder.none,
            hintStyle: TextStyle(
              color: Colors.black,
                fontSize: 15.0.
            ),
          ),
          style: new TextStyle(
              color: Colors.black,
              fontSize: 15.0,
           ),
          );

สำหรับการป้อนตัวเลขหรือแป้นพิมพ์ตัวเลขคุณสามารถใช้ keyboardType: TextInputType.number

TextFormField(
  decoration: InputDecoration(labelText:'Amount'),
    controller: TextEditingController(
  ),
  validator: (value) {
    if (value.isEmpty) {
      return 'Enter Amount';
    }
  },
  keyboardType: TextInputType.number
)