Flutter开发(十一)：Flutter表单输入与富文本

1.获取用户输入

用户输入用 TextField 或 TextFormField 实现，通过 TextEditingContriller 获得用户输入。

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final myController = TextEditingController();

  @override
  void dispose() {
    // TODO: implement dispose
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: TextField(
          controller: myController,
        ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
           showDialog(
            context:context,
            builder: (context){
              return AlertDialog(
                content: Text(myController.text),
              );
            },
          );
        },
        tooltip: 'Show',
        child: Icon(Icons.text_fields),
      ),
    );
  }
}

2.设置输入框提示文字

设置参数 InputDecoration 来展示提示，或占位符数字。

        body: TextField(
          controller: myController,
          decoration: InputDecoration(hintText: "这是提示"),
        )

3.显示验证错误信息

InputDecoration 不仅可以添加提示信息，还可以添加错误信息。下面代码中 onSubmitted 方法，点击回车或确定会调用，errorText是提示的错误信息。

class _MyHomePageState extends State<MyHomePage> {
  final myController = TextEditingController();
  String _errorText = "";

  @override
  void dispose() {
    // TODO: implement dispose
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: TextField(
        onSubmitted: (String text) {
          setState(() {
            if (!isEmail(text)) {
              _errorText = "输入错误";
            } else {
              _errorText = "";
            }
          });
        },
        controller: myController,
        decoration:
            InputDecoration(hintText: "这是提示", errorText: getErrorText()),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showDialog(
            context: context,
            builder: (context) {
              return AlertDialog(
                content: Text(myController.text),
              );
            },
          );
        },
        tooltip: 'Show',
        child: Icon(Icons.text_fields),
      ),
    );
  }

  getErrorText() {
    return _errorText;
  }

  bool isEmail(String emailString) {
    print("输入信息为:" + emailString);
    if (emailString == "123") {
      return true;
    } else {
      return false;
    }
  }
}

4.富文本显示

一行文字显示多种样式，比如下面图片：

上面的样式，可以用 TextSpan 来实现，上面可以分为三个 TextSpan ，12之前是一个，12是单独一个，12之后是一个，创建一个 TextSpan 列表，加入三个即可，如下：

class _MyHomePageState extends State<MyHomePage> {
  List<TextSpan> spans =[];
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    spans.add(TextSpan(text: "上海驿宿家民宿(民陈",style: TextStyle(fontSize: 20,color: Colors.blue)));
    spans.add(TextSpan(text: "12",style: TextStyle(fontSize: 20,color: Colors.yellow)));
    spans.add(TextSpan(text: "组路分店)",style: TextStyle(fontSize: 20,color: Colors.blue)));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: RichText(
        text: TextSpan(
          children: spans,
        ),
      ),
    );
  }
}