Flutter软键盘输入组件(可@人)

效果图

keyboard_input.gif

使用

 GlobalKey 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: "",
          showContent: "",
          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> triggerCallback(
      List> routerParams) async {
      /// 跳转选择人员页面
    String ret = await Navigator.of(context)
        .push(new MaterialPageRoute(builder: (context) => UserPickerPage()));
    if (ret != null) {
    /// 将关心的信息返回
      Map map = {"userName": ret};
      return map;
    }
  }

  Future doneInput(List rules, String value) async {
  /// 这里的Rule.params 属性里 会将刚刚triggerCallback里返回的map带回来
    print("输入完成：  value - $value ,rules.length : ${rules.length}");
    return Future.value(true);
  }

详细使用可见demo，比较简单，见github