使用来自另一个小部件的按钮插入 TextField - Flutter答案

【问题标题】：Insert into TextField using buttons from another widget - Flutter使用来自另一个小部件的按钮插入 TextField - Flutter
【发布时间】：2019-12-23 19:07:52
【问题描述】：

我有一个用作搜索栏的 TextField，用户可以在其中使用内置的 Android/iOS 键盘进行输入，但也可以通过按钮在搜索栏中插入特殊字符。在某种程度上，打字和其他插入被组合成一个字符串

用例：用户在搜索栏中键入hell，然后按下按钮小部件搜索栏的值变为：hello

我设置了一切，但是当我点击按钮时没有任何反应（从键盘输入正常）

这是我的代码：

//I have this as a global variable
TextEditingController _searchInputControllor = TextEditingController();

//This is the TextField
class _SearchBarState extends State<SearchBar> { 
  @override
  Widget build(BuildContext context) {
    return TextField( 
    enableInteractiveSelection: false,                     
    controller: _searchInputControllor,
    cursorColor: primaryDark,
    decoration: InputDecoration(
      contentPadding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 15.0),
      border: InputBorder.none,
      hintText: "Search...",
      suffixIcon: Material(                     
        color: Colors.white,
        elevation: 6.0,
        borderRadius: BorderRadius.all(Radius.circular(6.0),),
        child: InkWell(
          splashColor: Colors.greenAccent,
          onTap: () {},
          child: Icon(Icons.search, color: primaryDark,),
         ),
       ),
     ),
   );
  }
} 

//This is the button widget
//It is supposed to add to the search bar but nothing happens
class _SpecialCharState extends State<SpecialChar> {
  @override
  Widget build(BuildContext context) {
    return ButtonTheme(
      minWidth: 40.0,
      child: FlatButton(
        color: Colors.transparent,
        textColor: Colors.black,
        padding: EdgeInsets.all(8.0),
        splashColor: Colors.blue,
        onPressed: () {
          setState(() {
            _searchInputControllor.text = _searchInputControllor.text + widget.btnVal.toLowerCase();
          });
        },
        child: Text(
          widget.btnVal
        ),
      )
    );
   }
  }

【问题讨论】：

标签： flutter dart textfield

【解决方案1】：

A.完全没问题

我认为您的代码运行良好，因为我在我的 Android 手机 Demo 上进行了尝试。

当我点击按钮时，文本字段会发生变化。

B.更改光标位置

不过，我添加了这段代码，使光标自动放在最后一个字符上。

我们不是直接更改文本，而是复制其包含选择的值。后来我们偏移它的选择长度为newText

void appendCharacters() {
  String oldText = _searchInputControllor.text;
  String newText = oldText + widget.btnVal.toLowerCase();

  var newValue = _searchInputControllor.value.copyWith(
    text: newText,
    selection: TextSelection.collapsed(
      offset: newText.length, //offset to Last Character
    ),
    composing: TextRange.empty,
  );

  _searchInputControllor.value = newValue;
}

所以我们可以用下面的代码来触发这个方法：

Widget build(BuildContext context) {
  return ButtonTheme(
    minWidth: 40.0,
    child: FlatButton(
      onPressed: appendCharacters, // call a function
    ),
  );
}

工作应用程序库

您可以查看这个 repo 并自己构建。 Github

【讨论】：