流式布局wrap,flutter中文网
代码:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:monitor/common/style/style_custom.dart';
class DeviceSearchPage extends StatefulWidget {
List<String> contents = [
"mc20",
"sony A6300系列",
"sony a7",
"sony 黑卡",
"iphone xr",
"'耐克'店铺",
"mc20",
"123",
"321",
];
List<String> hisArray = [
"mc20",
"sony A6300系列",
"iphone xr",
"'耐克'店铺",
"mc20",
];
@override
State<StatefulWidget> createState() {
return _DeviceSearchPageState();
}
}
class _DeviceSearchPageState extends State<DeviceSearchPage> {
String searchValue = "";
TextEditingController _controller = new TextEditingController();
@override
void initState() {
super.initState();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
double statusHeight = MediaQuery.of(context).padding.top;
return Scaffold(
body: Container(
color: Colors.white,
padding: EdgeInsets.fromLTRB(16, statusHeight + 12, 16, 16),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
height: 36,
alignment: Alignment.center,
decoration: BoxDecoration(
color: CustomColors.grey_swallow,
borderRadius: BorderRadius.circular(36)),
child: Row(
children: <Widget>[
SizedBox(width: 6),
Icon(Icons.search),
SizedBox(width: 6),
Expanded(
flex: 1,
child: TextField(
decoration: new InputDecoration(
hintText: '设备搜索', border: InputBorder.none),
style: CustomText.TextSmall,
onChanged: (value) {
setState(() {
searchValue = value;
});
},
controller: _controller,
),
),
searchValue != ""
? InkWell(
onTap: () {
setState(() {
searchValue = "";
});
_controller.text=searchValue;
},
child: Icon(Icons.close, size: 14),
)
: Container(),
SizedBox(width: 6)
],
),
),
),
SizedBox(width: 8),
InkWell(
onTap: () {
Navigator.pop(context);
},
child: Text("取消"),
)
],
),
SizedBox(
height: 32,
),
searchValue == ""
? getHistoryWidget()
: getSearchResultWidget()
],
),
),
);
}
///搜索结果
Widget getSearchResultWidget() {
List<String> results = [];
List.generate(widget.contents.length, (index) {
if (widget.contents[index].contains(searchValue)) {
results.add(widget.contents[index]);
}
});
return SingleChildScrollView(
child: Column(
children: List.generate(results.length, (index) {
return InkWell(
onTap: () {
_controller.text = results[index];
},
child: Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: CustomColors.grey_swallow))),
child: Text(results[index]),
));
}),
),
);
}
///搜索历史
Widget getHistoryWidget() {
return Column(
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"搜索历史",
style: CustomText.TextBigBold,
),
InkWell(
onTap: showClearDialog,
child: Icon(Icons.delete_forever,
color: Colors.redAccent, size: 20),
)
],
)),
SizedBox(
height: 26,
),
SingleChildScrollView(
child: Wrap(
spacing: 6,
runSpacing: 6,
children: List.generate(widget.hisArray.length, (index) {
return InkWell(
onTap: () {
setState(() {
searchValue = widget.hisArray[index];
});
_controller.text = searchValue;
},
child: Chip(
backgroundColor: CustomColors.grey_swallow,
label:
Text(widget.hisArray[index], style: CustomText.TextSmall),
),
);
}),
),
)
],
);
}
showClearDialog() {
showDialog(
context: context,
builder: (BuildContext context) {
return CupertinoAlertDialog(
title: Text(""),
content: Text("确认清除所有搜索记录吗?"),
actions: <Widget>[
CupertinoDialogAction(
child: Text("取消"),
onPressed: () {
Navigator.pop(context);
print("取消");
},
),
CupertinoDialogAction(
child: Text("确定"),
onPressed: () {
setState(() {
widget.hisArray = [];
});
Navigator.pop(context);
},
),
],
);
});
}
}