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

Question

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

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

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

这是我的代码：

//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
        ),
      )
    );
   }
  }

Answer 1

一个。完全没问题

我认为您的代码在我的 Android Phone Demo.

上运行良好

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

乙。更改光标位置

尽管如此，我还是添加了这段代码，让光标自动放在最后一个字符上。

我们没有直接更改文本，而是复制其包含选择的值。稍后我们 offset 它的选择长度 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
    ),
  );
}

工作应用存储库

您可以查看此存储库并自行构建。 Github

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

Insert into TextField using buttons from another widget - Flutter

textfield

dart

flutter

一个。完全没问题

乙。更改光标位置

工作应用存储库