flutter——输入框 textfield和弹出提示 AlertDialog

项目 textfield 0228

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyContainer(),
    );
  }
}

//自定义组件,放置文本输入框
class MyContainer extends StatefulWidget {
  final Widget child;

  MyContainer({Key key, this.child}) : super(key: key);

  _MyContainerState createState() => _MyContainerState();
}

class _MyContainerState extends State {
  //设置textfield使用的控制器对象
  TextEditingController _controller =TextEditingController();

  TextEditingController _controller_name =TextEditingController();

  //设置提示框,当输入完成后,输入信息
  String _text_show_str = "等待输入"; 



  @override
  Widget build(BuildContext context) {
    return Container(
       child: Scaffold(
         body: Center(
           child: Container(
             height: 500.0,
             child: Column(
               children: [

                 TextField(//文本输入框组件

                  controller: _controller,//设置控制器,这个控制器能获取输入框内容

                  decoration: InputDecoration(//设置输入框装饰器
                    icon: Icon(Icons.phone_iphone),
                    contentPadding: EdgeInsets.all(10.0),//内容内边距
                    labelText: "手机号",
                    helperText: "请输入手机号",
                  ),

                  autofocus: false, //自动获取焦点,设置false
                 ),

                 TextField(
                   controller: _controller_name,

                   decoration:InputDecoration(

                     labelText: "姓名",

                   ) ,

                   autofocus: false,

                 ),

                 IconButton(
                   icon: Icon(Icons.save),
                   onPressed: _func_text_save,//执行提交方法,
                 ),

                 Container(//提示框 

                    child: Text(_text_show_str),
                
                 )
               ],
             ),

           ),
         ),
       ),
    );
  }

  //创建方法,执行提交方法
  void _func_text_save(){
    print(_controller);
    //或val的值
    if (_controller.text.toString() =="") {//字符串为空
      //弹出提示
      showDialog(//弹出提示的方法

          context: context,

          builder: (context){
            return AlertDialog(//提示框组件

                title: Text("输入内容不能为空"),
                
            );
          },

      );
      
    } else {//输入框不为空
        print("输入内容是${_controller.text.toString()}");

         //弹出提示
      showDialog(//弹出提示的方法

          context: context,

          builder: (context){
            return AlertDialog(//提示框组件

                title: Text("输入内容是${_controller.text.toString()}"),
                
            );
          },

      );
        
        
    }

  }



}



/**
 *  TextField(//文本输入框组件

                  controller: _controller,//设置控制器,这个控制器能获取输入框内容

                  decoration: InputDecoration(//设置输入框装饰器
                    icon: Icon(Icons.phone_iphone),
                    contentPadding: EdgeInsets.all(10.0),//内容内边距
                    labelText: "手机号",
                    helperText: "请输入手机号",
                  ),

                  autofocus: false, //自动获取焦点,设置false
                 ),

 * 
 * 
 * 
 *  showDialog(//弹出提示的方法

          context: context,

          builder: (context){
            return AlertDialog(//提示框组件

                title: Text("输入内容是${_controller.text.toString()}"),
                
            );
          },

      );
 * 
 * 
 * 

 * 
 * 
 */

 

你可能感兴趣的:(flutter)