效果图
使用
GlobalKey<KeyboardInputState> kbInputKey;
@override
void initState() {
kbInputKey = GlobalKey();
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("键盘输入框+@人示例"),
),
body: KeyboardInput(
key: kbInputKey,
mediaQueryData: MediaQuery.of(context),
builder: (context) => SingleChildScrollView(...),
unique: "<userId>",
showContent: "<userName>",
triggerAtCallback: triggerCallback,
doneCallback: doneInput,
rightMenuBuilder: (context) => GestureDetector(
onTap: () => kbInputKey.currentState.doneInput(),
child: Icon(
Icons.send,
color: Colors.blue,
size: 20,
),
),
decoration: InputDecoration(
enabledBorder: null,
disabledBorder: null,
contentPadding:
EdgeInsets.only(left: 10, right: 10, top: 6, bottom: 6),
hintText: "请输入内容,可@人",
border: InputBorder.none,
),
));
}
Future<Map<String, dynamic>> triggerCallback(
List<Map<String, dynamic>> routerParams) async {
/// 跳转选择人员页面
String ret = await Navigator.of(context)
.push(new MaterialPageRoute(builder: (context) => UserPickerPage()));
if (ret != null) {
/// 将关心的信息返回
Map<String, dynamic> map = {"userName": ret};
return map;
}
}
Future<bool> doneInput(List<Rule> rules, String value) async {
/// 这里的Rule.params 属性里 会将刚刚triggerCallback里返回的map带回来
print("输入完成: value - $value ,rules.length : ${rules.length}");
return Future.value(true);
}
详细使用可见demo,比较简单,见github