flutter 自定義輸入框元件

2022-07-19 16:15:22 字數 1711 閱讀 7451

一、元件分析

ui如下

根據ui分析我們需要提取哪些是動態的,可以通過傳遞引數得到不同的結果?

1.左側icon

2.輸入的文字

3.是否是密碼框

4.輸入框的控制器:如何時時得到輸入框的值

二、快速建立自定義元件

vscode中使用快捷鍵stl快速生成乙個無狀態元件,

}為什麼這裡使用的是乙個無狀態元件(statelesswidget)?,這裡只是乙個純展示的,給定固定的引數就會返回固定的結果,而不是涉及自定義元件內部狀態互動。因此選擇無狀態元件。

下面是建立好的無狀態元件模板

import 'package:flutter/material.dart';

class createmyinput extends statelesswidget )

// : super(key: key);

//接收引數寫法2:。。這種寫法更簡潔一點

createmyinput();

@override

widget build(buildcontext context)

} 

三、外部使用自定義組

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

if(phonecontroller.text == '')

if(passwordcontroller.text == '')

var data= ;

sharedpreferences _prefs = await sharedpreferences.getinstance();

await post('login/userlogin',formdata:params).then((val));

}

注意一些建立布局的方法以及邏輯方法要與widget build並列

widget build(buildcontext context) 

void _mylogin() async

widget _createlogo()

Numinput 自定義數字輸入框

1.1 data num int int float float data num int 正整數 data num int 整數 包含負整數 data num float 正數 data num float 包含負數的一起數字 1.2 max length 正數部分有多少位 預設為99999 ma...

Android自定義輸入框樣式

資料來自 菜鳥教程 自行編寫乙個shapedrawable的資源檔案!然後textview將blackgroung 設定為這個drawable資源即可!shapedrawable資源檔案的幾個節點以及屬性 需要改變游標的顏色 1 自定義bg cursor的drawable下xml檔案 2 在edit...

Android自定義密碼輸入框

最近朋友諮詢了乙個 輸入框,檢視了以前 現在重新整理了一下,將輸入框的邊框顏色,字型顏色,分割線顏色都抽出來了,方便不同需求的設定。先看看效果圖 由於比較簡單,所以直接檢視 吧,import android.content.context import android.content.res.typ...