flutter 输入框组件封装

Posted 2021-10-31 ruoqiang

一、组件分析

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;

// const CreateMyInput(

// {Key key,

// @required this.iconString,

// @required this.placeholder,

// @required this.isPassword,

// @required this.inputController})

// : super(key: key);

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),

注意使用的时候参数需要加类型