当前位置：文江博客话题详情

如何使用Flutter字段检测 @标志

发布于 2025-02-05 21:23:46 字数 435 浏览 2 评论 0原文

我有一个textfield，要求用户使用@ sign调用另一个用户。因此，如果用户按 @，则在TextField的顶部应该有一个弹出窗口。

我尝试使用此 package 但是如果不适合我想要的东西...

这是一个示例。它只能显示仅当用户类型 @时显示。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

花伊自在美 2025-02-12 21:23:46

使用textfield您使用它具有on Changed方法来捕获对文本字段输入所做的所有更改，并且可以评估文本字段的第一个字符，这就是我建议你做什么。

在我的示例中，它打印了在文本场的输入中所做的每一个更改。它还仅检查输入的第一个字符，然后打印到控制台。您还可以使用setstate而不是打印来设置布尔值，然后处理所使用的插件。

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  late TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextField(
          controller: _controller,
          onChanged: (String value) {
            value.characters.first == '@'
                ? print(
                    'Contains @',
                  )
                : print(
                    'Does not contain @',
                  );
          },
        ),
      ),
    );
  }
}

With the TextField you use it has the onChanged method to catch all the changes made to the text field input and with that you can evaluate the first character of the text field and that's what I'd recommend you to.

With my example, it prints every change made in the input of the textfield. It also checks only the first character of the input and prints to the console. You also can use setState instead of print to for example sets a boolean and then handles the Plugin you use.

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  late TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextField(
          controller: _controller,
          onChanged: (String value) {
            value.characters.first == '@'
                ? print(
                    'Contains @',
                  )
                : print(
                    'Does not contain @',
                  );
          },
        ),
      ),
    );
  }
}

回复收藏 0 原文

迷迭香的记忆 2025-02-12 21:23:46

在 flutter_typeahead 软件包中，您可以在dubsionscallbackback中添加逻辑。

在下面的示例中，如果文本以@开头，我仅调用API并显示数据。 根据您的要求进行修改。

TypeAheadField(
  textFieldConfiguration: TextFieldConfiguration(
    autofocus: true,
    style: DefaultTextStyle.of(context).style.copyWith(
      fontStyle: FontStyle.italic
    ),
    decoration: InputDecoration(
      border: OutlineInputBorder()
    )
  ),
  suggestionsCallback: (pattern) async {
    if("${pattern}".startsWith("@")){
        return await BackendService.getSuggestions(pattern);
    }else{
        return [];
    }
  },
  itemBuilder: (context, suggestion) {
    return ListTile(
      leading: Icon(Icons.shopping_cart),
      title: Text(suggestion['name']),
      subtitle: Text('\${suggestion['price']}'),
    );
  },
  onSuggestionSelected: (suggestion) {
    Navigator.of(context).push(MaterialPageRoute(
      builder: (context) => ProductPage(product: suggestion)
    ));
  },
)

In flutter_typeahead package, you can add your logic in the suggestionsCallback.

In the example below, i am only calling the api and showing the data if the text starts with @. Modify as per your requirements.

TypeAheadField(
  textFieldConfiguration: TextFieldConfiguration(
    autofocus: true,
    style: DefaultTextStyle.of(context).style.copyWith(
      fontStyle: FontStyle.italic
    ),
    decoration: InputDecoration(
      border: OutlineInputBorder()
    )
  ),
  suggestionsCallback: (pattern) async {
    if("${pattern}".startsWith("@")){
        return await BackendService.getSuggestions(pattern);
    }else{
        return [];
    }
  },
  itemBuilder: (context, suggestion) {
    return ListTile(
      leading: Icon(Icons.shopping_cart),
      title: Text(suggestion['name']),
      subtitle: Text('\${suggestion['price']}'),
    );
  },
  onSuggestionSelected: (suggestion) {
    Navigator.of(context).push(MaterialPageRoute(
      builder: (context) => ProductPage(product: suggestion)
    ));
  },
)

回复收藏 0 原文

~没有更多了~