Flutter 사용자 정의 검색 상자 효과
효과.
실현 방식
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:keduo/base/baseSize.dart';
import 'package:keduo/utils/icon_utils.dart';
class SearchBarWidget extends StatefulWidget {
final ValueChanged<String> onchangeValue;
final VoidCallback onEditingComplete;
const SearchBarWidget({this.onchangeValue, this.onEditingComplete, Key key})
: super(key: key);
@override
SearchBarWidgetState createState() => SearchBarWidgetState();
}
class SearchBarWidgetState extends State<SearchBarWidget> {
///
TextEditingController _controller;
///
bool _hasDeleteIcon = false;
@override
void initState() {
super.initState();
_controller = TextEditingController();
}
Widget buildTextField() {
//theme
return TextField(
controller: _controller,
textInputAction: TextInputAction.search,
keyboardType: TextInputType.text,
maxLines: 1,
decoration: InputDecoration(
// decoration
contentPadding:
const EdgeInsets.symmetric(vertical: 10.0, horizontal: 1.0),
//
prefixIcon: Padding(
padding: EdgeInsets.only(left: 0.0),
child: ImageIcon(
AssetImage(
IconUtils.getIconPath('ic_edit_search'),
),
color: Colors.black26,
),
),
prefixIconConstraints: BoxConstraints(
//
minWidth: 30,
minHeight: 25,
),
border: InputBorder.none, //
hintText: " ",
hintStyle: new TextStyle(fontSize: BaseSize.sp(14), color: Colors.grey),
//
suffixIcon: Container(
padding: EdgeInsetsDirectional.only(
start: 2.0,
end: _hasDeleteIcon ? 0.0 : 0,
),
child: _hasDeleteIcon
? new InkWell(
onTap: (() {
setState(() {
/// build
WidgetsBinding.instance
.addPostFrameCallback((_) => _controller.clear());
_hasDeleteIcon = false;
});
}),
child: Icon(
Icons.cancel,
size: 18.0,
color: Colors.grey,
),
)
: new Text(''),
),
),
onChanged: (value) {
setState(() {
if (value.isEmpty) {
_hasDeleteIcon = false;
} else {
_hasDeleteIcon = true;
}
widget.onchangeValue(_controller.text);
});
},
onEditingComplete: () {
FocusScope.of(context).requestFocus(FocusNode());
widget.onEditingComplete();
},
style: new TextStyle(fontSize: 14, color: Colors.black),
);
}
@override
Widget build(BuildContext context) {
return Container(
//
decoration: new BoxDecoration(
border: Border.all(color: Colors.black12, width: 1.0), //
color: Colors.black12,
borderRadius:
new BorderRadius.all(new Radius.circular(BaseSize.dp(18))),
),
alignment: Alignment.center,
height: BaseSize.dp(36),
padding: EdgeInsets.fromLTRB(10.0, 0.0, 0.0, 0.0),
child: buildTextField(),
);
}
@override
void dispose() {
super.dispose();
_controller.dispose();
}
}
쓰다
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0,
brightness: Brightness.light,
leading: IconButton(
icon: Image.asset(IconUtils.getIconPath('fanhui')),
onPressed: () => Navigator.pop(context)),
title: SearchBarWidget(
onchangeValue: (value) {
print(value);
},
onEditingComplete: () {
print(' ');
},
),
backgroundColor: Colors.white,
),
body: Text(''),
backgroundColor: BaseColor.colorFFF5F5F5,
);
}
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.