颤动代码,接受用户显示必填字段中的值

时间:2018-12-16 12:10:00

标签: dart flutter

**您好,我正在开发一个应用程序,用户应在其中输入整数值。根据这些值,我们应显示这些文本字段的数量。

  • 例如:

              1) enter total number of subject=10;
              2) click on the button;
              3) After button is clicked should display 10 text fields;
              4) I have no idea what to do so if you know then help me plz.**
    

    导入“ package:flutter / material.dart”;

    class imcaaddsubject extends StatefulWidget {
      @override
      _imcaaddsubjectState createState() => _imcaaddsubjectState();
    }
    
    class _imcaaddsubjectState extends State<imcaaddsubject> {
      @override
      Widget build(BuildContext context) {
        return Container(
          padding: EdgeInsets.all(5),
          child: Card(
            child: ListView(
              padding: EdgeInsets.all(10),
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.only(top: 10),
                ),
                new TextField(
                  decoration: InputDecoration(
                    border: OutlineInputBorder(
                        borderSide: BorderSide(style: BorderStyle.solid)),
                    labelText: "NUMBER OF SUBJECTS",
                    hintText: "Enter number of subjects",
                  ),keyboardType: TextInputType.number,
                ),
                Padding(
                  padding: EdgeInsets.only(top: 15),
                ),
                new RaisedButton(
                  child: Text(
                    "OK",
                    style:
                        TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                  ),
                  color: Colors.cyan,
                  onPressed: () {},
                )
              ],
            ),
          ),
        );
      }
    }
    

1 个答案:

答案 0 :(得分:0)

您可以尝试这样:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: MyApp(),
    ));

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  int numberOfSubjects = 0;

  Widget subjectsBuilder(int numberOfSubjects) {
    if (numberOfSubjects > 0) {
      return ListView.builder(
        itemBuilder: (BuildContext context, numberOfSubjects) {
          return TextField(
            decoration: InputDecoration(hintText: "enter a text"),
          );
        },
        itemCount: numberOfSubjects,
      );
    } else {
      return SizedBox();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(children: <Widget>[
        Expanded(
          child: Container(
            padding: EdgeInsets.all(5),
            child: Card(
              child: ListView(
                padding: EdgeInsets.all(10),
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.only(top: 10),
                  ),
                  new TextField(
                    onSubmitted: (String value) {
                      setState(() {
                        numberOfSubjects = int.parse(value);
                      });
                    },
                    decoration: InputDecoration(
                      border: OutlineInputBorder(
                          borderSide: BorderSide(style: BorderStyle.solid)),
                      labelText: "NUMBER OF SUBJECTS",
                      hintText: "Enter number of subjects",
                    ),
                    keyboardType: TextInputType.number,
                  ),
                  Padding(
                    padding: EdgeInsets.only(top: 15),
                  ),
                ],
              ),
            ),
          ),
        ),
        Expanded(
          child: subjectsBuilder(numberOfSubjects),
        )
      ]),
    );
  }
}

此代码将根据用户输入的内容在第一个文本字段下方显示许多文本字段,您当然可以在新页面中进行渲染..也不必使用按钮,用户提交就足够了文字。