Flutter 텍스트 입력 상자 구성 요 소 를 어떻게 밀봉 합 니까?
UI 구성 요 소 를 패키지 하려 면 다음 세 가 지 를 고려 해 야 합 니 다.
먼저 이전 텍스트 상 자 를 사용 한 코드 를 살 펴 보 겠 습 니 다.여 기 는 실제 적 으로 하나의 함 수 를 호출 하여 새로운 구성 요 소 를 되 돌려 주 었 을 뿐 입 니 다.사용자 이름,비밀 번 호 는 구성원 속성 을 사 용 했 기 때문에 서로 다른 구성원 속성 에 따라 다른 행 위 를 설정 해 야 합 니 다.주로 다음 과 같 습 니 다.
Widget _getPasswordInput() {
return _getInputTextField(
TextInputType.text,
obscureText: true,
controller: _passwordController,
decoration: InputDecoration(
hintText: " ",
icon: Icon(
Icons.lock_open,
size: 20.0,
),
suffixIcon: GestureDetector(
child: Offstage(
child: Icon(Icons.clear),
offstage: _password == '',
),
onTap: () {
this.setState(() {
_password = '';
_passwordController.clear();
});
},
),
border: InputBorder.none,
),
onChanged: (value) {
this.setState(() {
_password = value;
});
},
);
}
Widget _getInputTextFieldNew(
String formKey,
String value, {
TextInputType keyboardType = TextInputType.text,
FocusNode focusNode,
controller: TextEditingController,
onChanged: Function,
String hintText,
IconData prefixIcon,
onClear: Function,
bool obscureText = false,
height = 50.0,
margin = 10.0,
}) {
//......
}
추출 후의 코드 는 업무 페이지 와 무관 하기 때문에 추출 코드 가 필요 합 니 다.lib 디 렉 터 리 에 components 디 렉 터 리 를 추가 하여 form 을 추가 합 니 다.util.dart 파일 은 일반적인 폼 구성 요 소 를 저장 하 는 데 사 용 됩 니 다.실 현 된 코드 는 다음 과 같다.
class FormUtil {
static Widget textField(
String formKey,
String value, {
TextInputType keyboardType = TextInputType.text,
FocusNode focusNode,
controller: TextEditingController,
onChanged: Function,
String hintText,
IconData prefixIcon,
onClear: Function,
bool obscureText = false,
height = 50.0,
margin = 10.0,
}) {
return Container(
height: height,
margin: EdgeInsets.all(margin),
child: Column(
children: [
TextField(
keyboardType: keyboardType,
focusNode: focusNode,
obscureText: obscureText,
controller: controller,
decoration: InputDecoration(
hintText: hintText,
icon: Icon(
prefixIcon,
size: 20.0,
),
border: InputBorder.none,
suffixIcon: GestureDetector(
child: Offstage(
child: Icon(Icons.clear),
offstage: value == null || value == '',
),
onTap: () {
onClear(formKey);
},
),
),
onChanged: (value) {
onChanged(formKey, value);
}),
Divider(
height: 1.0,
color: Colors.grey[400],
),
],
),
);
}
}
우선 맵 을 사용 하여 현재 페이지 의 폼 내용 을 정의 하여 서로 다른 폼 필드 의 표현 형식 을 제어 합 니 다.
Map<String, Map<String, Object>> _formData = {
'username': {
'value': '',
'controller': TextEditingController(),
'obsecure': false,
},
'password': {
'value': '',
'controller': TextEditingController(),
'obsecure': true,
},
};
_handleTextFieldChanged(String formKey, String value) {
this.setState(() {
_formData[formKey]['value'] = value;
});
}
_handleClear(String formKey) {
this.setState(() {
_formData[formKey]['value'] = '';
(_formData[formKey]['controller'] as TextEditingController)?.clear();
});
}
//...
FormUtil.textField(
'username',
_formData['username']['value'],
controller: _formData['username']['controller'],
hintText: ' ',
prefixIcon: Icons.mobile_friendly,
onChanged: _handleTextFieldChanged,
onClear: _handleClear,
),
FormUtil.textField(
'password',
_formData['password']['value'],
controller: _formData['password']['controller'],
obscureText: true,
hintText: ' ',
prefixIcon: Icons.lock_open,
onChanged: _handleTextFieldChanged,
onClear: _handleClear,
),
//...
구덩이 밟 기 기록
텍스트 상 자 를 봉인 할 때 GesureDetector 의 onTap 속성 에 onClear 함 수 를 직접 복사 한 결과 입력 할 때마다 onClear 가 텍스트 상자 내용 을 자동 으로 비 웁 니 다.나중에 실제 적 으로 반전 함 수 를 전달 해 야 한 다 는 것 을 알 게 되 었 습 니 다.다음은 두 가지 방식 의 차이 점 을 보 여 주 었 습 니 다.
//...
//
onTap:onClear,
//...
//...
//
onTap:() {
onClear(formKey);
},
//...
패 키 징 UI 구성 요 소 는 실제 개발 과정 에서 흔히 볼 수 있 습 니 다.일반적으로 디자인 원 고 를 볼 때 먼저 디자인 원 고 를 여러 구성 요소 로 나 눈 다음 에 그 중의 일부 구성 요소 가 다른 장소 에서 도 사용 되 는 지 고려 합 니 다.사용 가능 하 다 면 포장 을 고려 해 보 세 요.패 키 징 할 때 대외 인터페이스 파 라 메 터 를 고려 한 다음 에 UI 구성 요소 가 업무 와 관련 되 지 않도록 주의 한 다음 에 가능 한 한 간편 하 게(예 를 들 어 기본 값 이 있 고 필수 파 라 메 터 를 줄 이 는 것).물론 회사 가 처음부터 제품,디자인,개발 과 함께 구성 요 소 를 정할 수 있다 면 미리 포장 하면 뒤의 개발 효율 이 더욱 높 아 질 것 이다.그러나 이것 은 프로젝트 시간의 긴급 정도 에 달 려 있 고 시간 이 충분 하 다 면 이렇게 고려 할 수 있다.
이상 은 Flutter 가 텍스트 입력 상 자 를 어떻게 밀봉 하 는 지 에 대한 상세 한 내용 입 니 다.Flutter 패 키 징 텍스트 입력 상자 에 관 한 자 료 는 다른 관련 글 에 주목 하 십시오!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【Flutter】DateTime 전월의 일수를 취득한다달의 일수를 취득할 필요가 있어, 의외로 수요 있을까라고 생각했으므로 비망록 정도에 남겨 둡니다. DateTime 날짜에 0을 입력하면 전월 DateTime이 됩니다. 2021년 3월 0일 = 2021년 2월 28일...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
