1. flutter TextFormField的使用

TextFormField 就是输入框，支持不同的输入模式，比如邮箱，手机号，或者nunber

  1. autofocus  //是否对焦
  2. keyboardType  //输入模式
  3. initialValue   //默认值
  4. decoration   InputDecoration  TextFormField专门的输入边界

示例

  1. import 'package:demoflutter/utils/utlis.dart';
  2. import 'package:flutter/material.dart';
  4. class Demo2 extends StatelessWidget {
  5.   @override
  6.   Widget build(BuildContext context) {
  7.     // TODO: implement build
  8.     return Scaffold(
  9.       appBar: AppBar(
  10.         title: Text('输入弹窗'),
  11.       ),
  12.       body: SingleChildScrollView(
  13.         padding: EdgeInsets.symmetric(horizontal: 24),
  14.         child: Column(
  15.           children: <Widget>[
  16.             SizedBox(
  17.               height: 32,
  18.             ),
  19.             TextFormField(
  20.               //是否自动对焦
  21.               autofocus: false,
  22.               //输入模式，邮件
  23.               keyboardType: TextInputType.emailAddress,
  24.               //输入框，默认值
  25.               initialValue: '1332232323@qq.com',
  26.               decoration: InputDecoration(
  27.                 //输入框内边距
  28.                   contentPadding:
  29.                       EdgeInsets.symmetric(horizontal: 20, vertical: 10),
  30.                   //输入框内容提示
  31.                   hintText: '请输入弹窗',
  32.                   //输入框边距线
  33.                   border: OutlineInputBorder(
  34.                       borderRadius: BorderRadius.circular(32))),
  35.             ),
  37.             SizedBox(height: 20,),
  38.             TextFormField(
  39.               //输入内容，隐藏
  40.               obscureText:true,
  41.               autofocus: false,
  42.               decoration: InputDecoration(
  43.                 contentPadding: EdgeInsets.symmetric(horizontal: 20,vertical: 10),
  44.                 hintText: '请输入密码',
  45.                 border: OutlineInputBorder(
  46.                   borderRadius: BorderRadius.circular(32)
  47.                 )
  48.               ),
  49.             ),
  50.             SizedBox(height: 20,),
  51.             FlatButton(onPressed: (){
  52.               Utils.showToast(context,'啦啦啦啦啦啦啦');
  53.             }, child: Text('忘记密码？',style: TextStyle(fontSize: 16,color: Colors.black),))
  54.           ],
  55.         ),
  56.       ),
  57.     );
  58.   }
  59. }

2. TextFormField

代码示例

原 原2

  1. import 'package:flutter/cupertino.dart';
  2. import 'package:flutter/material.dart';
  4. ///整理
  5. //TextField 输入文本 decoration 配置边框样式以及提示文本分析篇
  6. class TextFeildHomePage5 extends StatefulWidget {
  7.   @override
  8.   State<StatefulWidget> createState() {
  9.     return TextFeildHomePageState();
  10.   }
  11. }
  13. class TextFeildHomePageState extends State {
  15.   ///用来控制  TextField 焦点的获取与关闭
  16.   FocusNode focusNode = new FocusNode();
  17.   ///文本输入框是否可编辑
  18.   bool isEnable = true;
  20.   @override
  21.   void initState() {
  22.     super.initState();
  24.     ///添加获取焦点与失去焦点的兼听
  25.     focusNode.addListener((){
  26.       ///当前兼听的 TextFeild 是否获取了输入焦点
  27.       bool hasFocus = focusNode.hasFocus;
  28.       ///当前 focusNode 是否添加了兼听
  29.       bool hasListeners = focusNode.hasListeners;
  31.       print("focusNode 兼听 hasFocus:$hasFocus  hasListeners:$hasListeners");
  32.     });
  34.     /// WidgetsBinding 它能监听到第一帧绘制完成，第一帧绘制完成标志着已经Build完成
  35.     WidgetsBinding.instance.addPostFrameCallback((_) {
  36.       ///获取输入框焦点
  37.       FocusScope.of(context).requestFocus(focusNode);
  38.     });
  39.   }
  41.   @override
  42.   Widget build(BuildContext context) {
  43.     return Scaffold(
  44.       appBar: AppBar(
  45.         actions: <Widget>[
  46.           FlatButton(child: Text("获取焦点"),onPressed: (){
  47.             FocusScope.of(context).requestFocus(focusNode);
  48.           },),
  49.           FlatButton(child: Text("失去焦点"),onPressed: (){
  50.             focusNode.unfocus();
  51.           },),
  52.           FlatButton(child: Text("编辑"),onPressed: (){
  53.             setState(() {
  54.               isEnable = true;
  55.             });
  56.           },),
  57.           FlatButton(child: Text("不可编辑"),onPressed: (){
  58.             setState(() {
  59.               isEnable = false;
  60.             });
  61.           },),
  62.         ],
  63.       ),
  64.       body: Container(
  65.         ///SizedBox 用来限制一个固定 width height 的空间
  66.         child: SizedBox(
  67.           width: 400,
  68.           height: 130,
  69.           child: Container(
  70.             color: Colors.white24,
  71.             ///距离顶部
  72.             margin: EdgeInsets.only(top: 30),
  73.             padding: EdgeInsets.all(10),
  74.             ///Alignment 用来对齐 Widget
  75.             alignment: Alignment(0, 0),
  76.             ///文本输入框
  77.             child: TextField(
  79.               ///是否可编辑
  80.               enabled: isEnable,
  81.               ///焦点获取
  82.               focusNode: focusNode,
  83.               ///用来配置 TextField 的样式风格
  84.               decoration: InputDecoration(
  85.                 ///设置输入文本框的提示文字
  86.                 ///输入框获取焦点时 并且没有输入文字时
  87.                 hintText: "请输入用户名",
  88.                 ///设置输入文本框的提示文字的样式
  89.                 hintStyle: TextStyle(color: Colors.grey,textBaseline: TextBaseline.ideographic,),
  90.                 ///输入框内的提示 输入框没有获取焦点时显示
  91.                 labelText: "用户名",
  92.                 labelStyle: TextStyle(color: Colors.blue),
  93.                 ///显示在输入框下面的文字
  94.                 helperText: "这里是帮助提示语",
  95.                 helperStyle: TextStyle(color: Colors.green),
  97.                 ///显示在输入框下面的文字
  98.                 ///会覆盖了 helperText 内容
  99.                 errorText: "这里是错误文本提示",
  100.                 errorStyle: TextStyle(color: Colors.red),
  102.                 ///输入框获取焦点时才会显示出来 输入文本的前面
  103.                 prefixText: "prefix",
  104.                 prefixStyle: TextStyle(color: Colors.deepPurple),
  105.                 ///输入框获取焦点时才会显示出来 输入文本的后面
  106.                 suffixText: "suf ",
  107.                 suffixStyle: TextStyle(color: Colors.black),
  109.                 ///文本输入框右下角显示的文本
  110.                 ///文字计数器默认使用
  111.                 counterText: "count",
  112.                 counterStyle:TextStyle(color: Colors.deepPurple[800]),
  114.                 ///输入文字前的小图标
  115.                 prefixIcon: Icon(Icons.phone),
  116.                 ///输入文字后面的小图标
  117.                 suffixIcon: Icon(Icons.close),
  119.                 ///与 prefixText 不能同时设置
  120. //                prefix: Text("A") ,
  121.                 /// 与 suffixText 不能同时设置
  122. //                suffix:  Text("B") ,
  123.                 ///设置边框
  124.                 ///   InputBorder.none 无下划线
  125.                 ///   OutlineInputBorder 上下左右 都有边框
  126.                 ///   UnderlineInputBorder 只有下边框  默认使用的就是下边框
  127.                 border: OutlineInputBorder(
  128.                   ///设置边框四个角的弧度
  129.                   borderRadius: BorderRadius.all(Radius.circular(10)),
  130.                   ///用来配置边框的样式
  131.                   borderSide: BorderSide(
  132.                     ///设置边框的颜色
  133.                     color: Colors.red,
  134.                     ///设置边框的粗细
  135.                     width: 2.0,
  136.                   ),
  137.                 ),
  138.                 ///设置输入框可编辑时的边框样式
  139.                 enabledBorder: OutlineInputBorder(
  140.                   ///设置边框四个角的弧度
  141.                   borderRadius: BorderRadius.all(Radius.circular(10)),
  142.                   ///用来配置边框的样式
  143.                   borderSide: BorderSide(
  144.                     ///设置边框的颜色
  145.                     color: Colors.blue,
  146.                     ///设置边框的粗细
  147.                     width: 2.0,
  148.                   ),
  149.                 ),
  150.                 disabledBorder: OutlineInputBorder(
  151.                   ///设置边框四个角的弧度
  152.                   borderRadius: BorderRadius.all(Radius.circular(10)),
  153.                   ///用来配置边框的样式
  154.                   borderSide: BorderSide(
  155.                     ///设置边框的颜色
  156.                     color: Colors.red,
  157.                     ///设置边框的粗细
  158.                     width: 2.0,
  159.                   ),
  160.                 ),
  161.                 ///用来配置输入框获取焦点时的颜色
  162.                 focusedBorder: OutlineInputBorder(
  163.                   ///设置边框四个角的弧度
  164.                   borderRadius: BorderRadius.all(Radius.circular(20)),
  165.                   ///用来配置边框的样式
  166.                   borderSide: BorderSide(
  167.                     ///设置边框的颜色
  168.                     color: Colors.green,
  169.                     ///设置边框的粗细
  170.                     width: 2.0,
  171.                   ),
  172.                 ),
  173.               ),
  174.             ),
  175.           ),
  176.         ),
  177.       ),
  178.     );
  179.   }
  180. }

3. flutter中的RaisedButton设置宽度

flutter中可以通过ButtonTheme为RaisedButton设置最小宽度，示例代码如下：

  1. ButtonTheme(
  2.   minWidth: 200.0,//设置最小宽度
  3.   height: 100.0,
  4.   child: RaisedButton(
  5.     onPressed: () {},
  6.     child: Text("test"),
  7.   ),
  8. );

如果要让宽度跟父控件保持一致，可以使用下面的示例代码：

  1. SizedBox(
  2.   width: double.infinity, // 宽度无限，跟父控件保持一致
  3.   child: RaisedButton(...)
  4. )

4. Flutter 限制TextFormField输入类型

  1. Container(
  2.   height: 40,
  3.   child: Row(
  4.     textBaseline: TextBaseline.ideographic,
  5.     mainAxisAlignment: MainAxisAlignment.spaceBetween,
  6.     children: <Widget>[
  7.       MyText('新密码'),
  8.       Expanded(
  9.         child: TextFormField(
  10.           maxLines: 1,
  11.           textAlign: TextAlign.right,
  12.           inputFormatters: [
  13.             WhitelistingTextInputFormatter(RegExp("[a-z,A-Z,0-9]")),      //限制只允许输入字母和数字
  14.             //                    WhitelistingTextInputFormatter.digitsOnly,                //限制只允许输入数字    
  15.             //                    LengthLimitingTextInputFormatter(8),                      //限制输入长度不超过8位
  17.           ],
  18.           style: TextStyle(
  19.             color: Color(0xff333333),
  20.             fontSize: 12.0,
  21.           ),
  22.           decoration: InputDecoration(
  23.             hintText: '字母+数字',
  24.             contentPadding: EdgeInsets.symmetric(vertical: 1),
  25.             hintStyle: TextStyle(fontSize: 12.0, color: Colors.grey),
  26.             border: OutlineInputBorder(borderSide: BorderSide.none)),
  27.         )),
  28.     ],
  29.   ),

5. Flutter-Text设置边距

  1. new Text('Text style',
  2.    textAlign: TextAlign.center,
  3.    style: new TextStyle(
  4.         fontSize: 12.0,
  5.         fontWeight: FontWeight.bold,
  6.         color: Colors.black,),
  7.     overflow: TextOverflow.ellipsis,
  8.             ),

其中textAlign是用来控制文本对齐方式，style控制文本包括字体，颜色，字体大小等样式。
Text文本是没有边距的设置参数，我们使用Container、Padding与Text嵌套使用。
**

  1. new Container( child: new Text("Container text"),
  2.               color: Colors.blue,
  3.               margin: const EdgeInsets.all(5.0),
  4.               padding: const EdgeInsets.all(5.0),),