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() {//...}