flutter 自定义输入框组件
一、组件分析
ui如下
根据UI分析我们需要提取哪些是动态的,可以通过传递参数得到不同的结果?
1.左侧icon
2.输入的文本
3.是否是密码框
4.输入框的控制器:如何时时得到输入框的值
二、快速创建自定义组件
vscode中使用快捷键stl快速生成一个无状态组件,
class CreateMyInput extends StatelessWidget { @override
Widget build(BuildContext context) { return Container( ); }
}
为什么这里使用的是一个无状态组件(StatelessWidget)?,这里只是一个纯展示的,给定固定的参数就会返回固定的结果,而不是涉及自定义组件内部状态交互。因此选择无状态组件。
下面是建立好的无状态组件模板
import 'package:flutter/material.dart';
class CreateMyInput extends StatelessWidget {
final iconString;
final placeholder;
final isPassword;
final inputController;
//接收参数写法:1:
// const CreateMyInput(
// {Key key,
// this.iconString,
// this.placeholder,
// this.isPassword,
// @required this.inputController})
// : super(key: key);
//接收参数写法2:。。这种写法更简洁一点
CreateMyInput({this.iconString,this.placeholder,this.isPassword,this.inputController});
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.fromLTRB(15.0,5,15.0,5),
child: Row(
children: <Widget>[
Image.asset(iconString,width: 25,color:Color(0xff2D4ED1)),
Expanded(
child: Container(
margin: EdgeInsets.only(left: 15),
decoration:BoxDecoration(
border:Border(bottom: BorderSide(width: 0.8,color: Color(0xff2D4ED1))), //底部border
),
padding: EdgeInsets.fromLTRB(0, 0, 5, 0),
child: TextField(
controller: inputController,
decoration: InputDecoration(
hintText: placeholder,
contentPadding: EdgeInsets.fromLTRB(0, 17, 15, 15), //输入框内容部分设置padding,跳转跟icon的对其位置
border:InputBorder.none,
),
obscureText: isPassword, //是否是以星号*显示密码
),
),
)
],
),
);
}
}
三、外部使用自定义组
import '../base_widgit/create_my_input.dart'; //手机号的控制器 TextEditingController phoneController = TextEditingController(); //密码的控制器 TextEditingController passwordController = TextEditingController(); CreateMyInput(iconString:'images/login_icon_phone.png',placeholder:"请输入手机号",isPassword:false,inputController:phoneController),
注意使用的时候参数需要加类型
获取输入框的值
void _mylogin() async{ print({'手机号': phoneController, '密码': passwordController.text});
if(phoneController.text == ''){
showToast("请输入手机号码");
return;
}
if(passwordController.text == ''){
showToast("请输入密码");
return;
}
var data= {
'Identifier': phoneController.text,
'Credential': passwordController.text
};
SharedPreferences _prefs = await SharedPreferences.getInstance();
await post('Login/UserLogin',formData:params).then((val){
print('dddddd:>>>>>>>>>>>>>-----------------------------------$val');
_prefs.setString('mobile',phoneController.text);
});
}
注意一些创建布局的方法以及逻辑方法要与Widget build并列
Widget build(BuildContext context) {//..}
void _mylogin() async{//...} Widget _createLogo() {//...}
flutter 自定义输入框组件的更多相关文章
- Flutter 中的常见的按钮组件 以及自定义按钮组件
Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton. IconButton.OutlineButton.ButtonBar.Float ...
- 移动端自定义输入框的vue组件 ----input
<style scoped lang="less"> .keyboard { font-family: -apple-system, BlinkMacSystemFon ...
- DateBox( 日期输入框) 组件
本节课重点了解 EasyUI 中 DateBox(日期输入框)组件的使用方法,这个组件依赖于 Combo(自定义下拉框)和 Calendar(日历). 一. 加载方式//class 加载方式<i ...
- 基于JQ的自定义弹窗组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 基于Vue的数字输入框组件开发
1.概述 Vue组件开发的API:props.events和slots 2.组件代码 github地址:https://github.com/MengFangui/VueInputNumber 效果: ...
- 第二百一十五节,jQuery EasyUI,DateBox(日期输入框)组件
jQuery EasyUI,DateBox(日期输入框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 DateBox(日期输入框)组件的使 ...
- 第二百一十三节,jQuery EasyUI,NumberBox(数值输入框)组件
jQuery EasyUI,NumberBox(数值输入框)组件 功能:只能输入数值,和各种数值的计算 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI ...
- vue自定义select组件
1.目的 看了很多element-ui的源码,决定自己实现一个简单的select组件,遇到的几个难点,便记录下来. 2.难点一 element-ui中的select组件通过v-model可以绑定数据, ...
- [Input-number]数字输入框组件
需求 加.减按钮 初始值 最大.最小值 数值改变时,触发一个自定义事件来通知父组件 目录文件 index.html 入口页 input-number.js 数字输入框组件 index.js 根实例 实 ...
随机推荐
- 利用特性和反射给泛型Model赋值
为了解决从数据库读取的表字段和自己建的viewModel字段名称不相符的问题 本人小白,初次将特性及反射应用到实例,写的不好的地方还请大家多多包涵 新建一个控制台应用程序命名为ReflectAndAt ...
- Oracle中和mysql中函数的区别
oracle --> mysqlto_char(sysdate,'yyyy-mm-dd')-->date_format(s ...
- jdbc中的sql注入
- 小程序 -- ui布局
Flex布局 相对定位和绝对定位 弹性盒模型 display flex-direction flex-wrap :nowrap(不换行)/ wrap(换行,第一行在上方)/ wrap-reverse ...
- [转] vue之computed和watch
计算属性 computed 侦听器or观察者 watch 一直以来对computed和watch一知半解,用的时候就迷迷糊糊的,今天仔细看了看文档,突然茅塞顿开,原来就是这么简单啊: computed ...
- 开放接口/RESTful/Api服务的设计和安全方案详解
一.总体思路 这个涉及到两个方面问题:一个是接口访问认证问题,主要解决谁可以使用接口(用户登录验证.来路验证)一个是数据数据传输安全,主要解决接口数据被监听(HTTPS安全传输.敏感内容加密.数字签名 ...
- sklearn数据库-【老鱼学sklearn】
在做机器学习时需要有数据进行训练,幸好sklearn提供了很多已经标注好的数据集供我们进行训练. 本节就来看看sklearn提供了哪些可供训练的数据集. 这些数据位于datasets中,网址为:htt ...
- c# 向数据库插数据超过1000条
今天想着如何大批量插入数据到数据库中 最开始的想法是使用insert循环插入 但每次都要创建数据库连接 这是非常消耗时间和消耗资源的事.后在网上看到了说使用SqlBulkCopy ,就看了看文档和别 ...
- Selenium 2自动化测试实战
Selenium 2自动化测试实战 百度网盘 链接:https://pan.baidu.com/s/1aiP3d8Y1QlcHD3fAlEj4sg 提取码:jp8e 复制这段内容后打开百度网盘手机Ap ...
- PHP定界符<<<EOF
PHP定界符<<<EOF 一.为什么需要使用定界符: 因为在编程过程中难免会遇到用echo来输出大段的html和javascript脚本的情况, 如果用传统的输出方法 ——按字符串输 ...