flutter聊天界面-TextField输入框实现@功能等匹配正则表达式展示高亮功能

已于 2023-09-15 13:37:07 修改
阅读量803 收藏 4
点赞数 3
分类专栏： 移动开发 flutter开发实战 flutter 文章标签： flutter 正则表达式 java 聊天界面 聊天输入框
于 2023-09-15 11:53:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gloryFlow/article/details/132899084
版权

flutter聊天界面-TextField输入框实现@功能等匹配正则表达式展示高亮功能

一、简要描述

描述：
最近有位朋友讨论的时候，提到了输入框的高亮展示。在flutter TextField中需要插入特殊样式的标签，比如：“请 @张三 回答一下”，这一串字符在TextField中输入，当输入@时 弹出好友列表选择，然后将 “@张三”高亮显示在TextField中。

效果图如下

在这里插入图片描述
视频效果

flutter聊天界面-TextField输入框实现@功能

昨天整理的文中，简单实用TextEditingController的buildTextSpan时候，直接修改代码

List<InlineSpan> textSpans = RichTextHelper.getRichText(value.text);
    if (composingRegionOutOfRange) {
      return TextSpan(style: style, children: textSpans);
    }

会出现光标输入的问题，这里修改了一下，完善了一下。

大家可以使用rich_text_controller来实现，查看rich_text_controller源码可以看到，RichTextController继承TextEditingController，重写了buildTextSpan。经过我在iPhone上测试，当输入@汉字的时候，对中文兼容会有问题，这里做一下修改完善修改。

二、TextEditingController的buildTextSpan方法

在TextEditingController中buildTextSpan方法中，我们可以看到，该方法中的代码
在这里插入图片描述

composingRegionOutOfRange：仅有输入完成的字

在最后一部分的代码中含有未输入完成的字

final TextStyle composingStyle = style?.merge(const TextStyle(decoration: TextDecoration.underline))
        ?? const TextStyle(decoration: TextDecoration.underline);
    return TextSpan(
      style: style,
      children: <TextSpan>[
        TextSpan(text: value.composing.textBefore(value.text)),
        TextSpan(
          style: composingStyle,
          text: value.composing.textInside(value.text),
        ),
        TextSpan(text: value.composing.textAfter(value.text)),
      ],
    );

  • composingStyle未输入完成的字的样式，可以自己做下修改。

  • value.composing.textBefore：当前输入前面的字。

  • value.composing.textAfter：当前输入后面的字。

当输入过程中，我们将value.composing.textBefore，value.composing.textAfter匹配高亮即可

代码如下

value.composing.textBefore

TextSpan(style: style, children: buildRegExpSpan(context: context, text: value.composing.textBefore(value.text))),

value.composing.textAfter

TextSpan(style: style, children: buildRegExpSpan(context: context, text: value.composing.textAfter(value.text))),

匹配正则表达式

List<TextSpan> buildRegExpSpan(
      {required BuildContext context,
        TextStyle? style,
        required String? text}) {
    List<TextSpan> children = [];
    if (!(text != null && text.isNotEmpty)) {
      return children;
    }
    final matches = <String>{};
    List<Map<String, List<int>>> matchIndex = [];

    // Validating with REGEX
    RegExp? allRegex;
    allRegex = patternMatchMap != null
        ? RegExp(patternMatchMap?.keys.map((e) => e.pattern).join('|') ?? "",
        caseSensitive: regExpCaseSensitive,
        dotAll: regExpDotAll,
        multiLine: regExpMultiLine,
        unicode: regExpUnicode)
        : null;
    // Validating with Strings
    RegExp? stringRegex;
    stringRegex = stringMatchMap != null
        ? RegExp(r'\b' + stringMatchMap!.keys.join('|').toString() + r'+\$',
        caseSensitive: regExpCaseSensitive,
        dotAll: regExpDotAll,
        multiLine: regExpMultiLine,
        unicode: regExpUnicode)
        : null;
    
    text.splitMapJoin(
      stringMatchMap == null ? allRegex! : stringRegex!,
      onNonMatch: (String span) {
        if (stringMatchMap != null &&
            children.isNotEmpty &&
            stringMatchMap!.keys.contains("${children.last.text}$span")) {
          final String? ks =
          stringMatchMap!["${children.last.text}$span"] != null
              ? stringMatchMap?.entries.lastWhere((element) {
            return element.key
                .allMatches("${children.last.text}$span")
                .isNotEmpty;
          }).key
              : '';

          children.add(TextSpan(text: span, style: stringMatchMap![ks!]));
          return span.toString();
        } else {
          children.add(TextSpan(text: span, style: style));
          return span.toString();
        }
      },
      onMatch: (Match m) {
        matches.add(m[0]!);
        final RegExp? k = patternMatchMap?.entries.firstWhere((element) {
          return element.key.allMatches(m[0]!).isNotEmpty;
        }).key;

        final String? ks = stringMatchMap?[m[0]] != null
            ? stringMatchMap?.entries.firstWhere((element) {
          return element.key.allMatches(m[0]!).isNotEmpty;
        }).key
            : '';
        if (deleteOnBack!) {
          if ((isBack(text!, _lastValue) && m.end == selection.baseOffset)) {
            WidgetsBinding.instance.addPostFrameCallback((_) {
              children.removeWhere((element) => element.text! == text);
              text = text!.replaceRange(m.start, m.end, "");
              selection = selection.copyWith(
                baseOffset: m.end - (m.end - m.start),
                extentOffset: m.end - (m.end - m.start),
              );
            });
          } else {
            children.add(
              TextSpan(
                text: m[0],
                style: stringMatchMap == null
                    ? patternMatchMap![k]
                    : stringMatchMap![ks],
              ),
            );
          }
        } else {
          children.add(
            TextSpan(
              text: m[0],
              style: stringMatchMap == null
                  ? patternMatchMap![k]
                  : stringMatchMap![ks],
            ),
          );
        }
        final resultMatchIndex = matchValueIndex(m);
        if (resultMatchIndex != null && onMatchIndex != null) {
          matchIndex.add(resultMatchIndex);
          onMatchIndex!(matchIndex);
        }

        return (onMatch(List<String>.unmodifiable(matches)) ?? '');
      },
    );
    return children;
  }

这里使用的是rich_text_controller中的代码，做了相应的修改，输入@张三正则表达式正常高亮显示了。

整个text_field_controller代码如下

import 'package:flutter/material.dart';

class TextFieldController extends TextEditingController {
  final Map<RegExp, TextStyle>? patternMatchMap;
  final Map<String, TextStyle>? stringMatchMap;
  final Function(List<String> match) onMatch;
  final Function(List<Map<String, List<int>>>)? onMatchIndex;
  final bool? deleteOnBack;
  String _lastValue = "";

  /// controls the caseSensitive property of the full [RegExp] used to pattern match
  final bool regExpCaseSensitive;

  /// controls the dotAll property of the full [RegExp] used to pattern match
  final bool regExpDotAll;

  /// controls the multiLine property of the full [RegExp] used to pattern match
  final bool regExpMultiLine;

  /// controls the unicode property of the full [RegExp] used to pattern match
  final bool regExpUnicode;

  bool isBack(String current, String last) {
    return current.length < last.length;
  }

  TextFieldController(
      {String? text,
        this.patternMatchMap,
        this.stringMatchMap,
        required this.onMatch,
        this.onMatchIndex,
        this.deleteOnBack = false,
        this.regExpCaseSensitive = true,
        this.regExpDotAll = false,
        this.regExpMultiLine = false,
        this.regExpUnicode = false})
      : assert((patternMatchMap != null && stringMatchMap == null) ||
      (patternMatchMap == null && stringMatchMap != null)),
        super(text: text);

  /// Setting this will notify all the listeners of this [TextEditingController]
  /// that they need to update (it calls [notifyListeners]).
  @override
  set text(String newText) {
    value = value.copyWith(
      text: newText,
      selection: const TextSelection.collapsed(offset: -1),
      composing: TextRange.empty,
    );
  }

  /// Builds [TextSpan] from current editing value.
  @override
  TextSpan buildTextSpan(
      {required BuildContext context,
        TextStyle? style,
        required bool withComposing}) {
    assert(!value.composing.isValid || !withComposing || value.isComposingRangeValid);
    // If the composing range is out of range for the current text, ignore it to
    // preserve the tree integrity, otherwise in release mode a RangeError will
    // be thrown and this EditableText will be built with a broken subtree.
    final bool composingRegionOutOfRange = !value.isComposingRangeValid || !withComposing;

    if (composingRegionOutOfRange) {
      List<TextSpan> children = [];
      final matches = <String>{};
      List<Map<String, List<int>>> matchIndex = [];

      // Validating with REGEX
      RegExp? allRegex;
      allRegex = patternMatchMap != null
          ? RegExp(patternMatchMap?.keys.map((e) => e.pattern).join('|') ?? "",
          caseSensitive: regExpCaseSensitive,
          dotAll: regExpDotAll,
          multiLine: regExpMultiLine,
          unicode: regExpUnicode)
          : null;
      // Validating with Strings
      RegExp? stringRegex;
      stringRegex = stringMatchMap != null
          ? RegExp(r'\b' + stringMatchMap!.keys.join('|').toString() + r'+\$',
          caseSensitive: regExpCaseSensitive,
          dotAll: regExpDotAll,
          multiLine: regExpMultiLine,
          unicode: regExpUnicode)
          : null;
      
      text.splitMapJoin(
        stringMatchMap == null ? allRegex! : stringRegex!,
        onNonMatch: (String span) {
          if (stringMatchMap != null &&
              children.isNotEmpty &&
              stringMatchMap!.keys.contains("${children.last.text}$span")) {
            final String? ks =
            stringMatchMap!["${children.last.text}$span"] != null
                ? stringMatchMap?.entries.lastWhere((element) {
              return element.key
                  .allMatches("${children.last.text}$span")
                  .isNotEmpty;
            }).key
                : '';

            children.add(TextSpan(text: span, style: stringMatchMap![ks!]));
            return span.toString();
          } else {
            children.add(TextSpan(text: span, style: style));
            return span.toString();
          }
        },
        onMatch: (Match m) {
          matches.add(m[0]!);
          final RegExp? k = patternMatchMap?.entries.firstWhere((element) {
            return element.key.allMatches(m[0]!).isNotEmpty;
          }).key;

          final String? ks = stringMatchMap?[m[0]] != null
              ? stringMatchMap?.entries.firstWhere((element) {
            return element.key.allMatches(m[0]!).isNotEmpty;
          }).key
              : '';
          if (deleteOnBack!) {
            if ((isBack(text, _lastValue) && m.end == selection.baseOffset)) {
              WidgetsBinding.instance.addPostFrameCallback((_) {
                children.removeWhere((element) => element.text! == text);
                text = text.replaceRange(m.start, m.end, "");
                selection = selection.copyWith(
                  baseOffset: m.end - (m.end - m.start),
                  extentOffset: m.end - (m.end - m.start),
                );
              });
            } else {
              children.add(
                TextSpan(
                  text: m[0],
                  style: stringMatchMap == null
                      ? patternMatchMap![k]
                      : stringMatchMap![ks],
                ),
              );
            }
          } else {
            children.add(
              TextSpan(
                text: m[0],
                style: stringMatchMap == null
                    ? patternMatchMap![k]
                    : stringMatchMap![ks],
              ),
            );
          }
          final resultMatchIndex = matchValueIndex(m);
          if (resultMatchIndex != null && onMatchIndex != null) {
            matchIndex.add(resultMatchIndex);
            onMatchIndex!(matchIndex);
          }

          return (onMatch(List<String>.unmodifiable(matches)) ?? '');
        },
      );

      _lastValue = text;
      return TextSpan(style: style, children: children);
    }

    final TextStyle composingStyle = style?.merge(const TextStyle(decoration: TextDecoration.underline))
        ?? const TextStyle(decoration: TextDecoration.underline);
    return TextSpan(
      children: <TextSpan>[
        TextSpan(style: style, children: buildRegExpSpan(context: context, text: value.composing.textBefore(value.text))),
        TextSpan(
          style: composingStyle,
          text: value.composing.textInside(value.text),
        ),
        TextSpan(style: style, children: buildRegExpSpan(context: context, text: value.composing.textAfter(value.text))),
      ],
    );
  }

  Map<String, List<int>>? matchValueIndex(Match match) {
    final matchValue = match[0]?.replaceFirstMapped('#', (match) => '');
    if (matchValue != null) {
      final firstMatchChar = match.start + 1;
      final lastMatchChar = match.end - 1;
      final compactMatch = {
        matchValue: [firstMatchChar, lastMatchChar]
      };
      return compactMatch;
    }
    return null;
  }

  List<TextSpan> buildRegExpSpan(
      {required BuildContext context,
        TextStyle? style,
        required String? text}) {
    List<TextSpan> children = [];
    if (!(text != null && text.isNotEmpty)) {
      return children;
    }
    final matches = <String>{};
    List<Map<String, List<int>>> matchIndex = [];

    // Validating with REGEX
    RegExp? allRegex;
    allRegex = patternMatchMap != null
        ? RegExp(patternMatchMap?.keys.map((e) => e.pattern).join('|') ?? "",
        caseSensitive: regExpCaseSensitive,
        dotAll: regExpDotAll,
        multiLine: regExpMultiLine,
        unicode: regExpUnicode)
        : null;
    // Validating with Strings
    RegExp? stringRegex;
    stringRegex = stringMatchMap != null
        ? RegExp(r'\b' + stringMatchMap!.keys.join('|').toString() + r'+\$',
        caseSensitive: regExpCaseSensitive,
        dotAll: regExpDotAll,
        multiLine: regExpMultiLine,
        unicode: regExpUnicode)
        : null;
    
    text.splitMapJoin(
      stringMatchMap == null ? allRegex! : stringRegex!,
      onNonMatch: (String span) {
        if (stringMatchMap != null &&
            children.isNotEmpty &&
            stringMatchMap!.keys.contains("${children.last.text}$span")) {
          final String? ks =
          stringMatchMap!["${children.last.text}$span"] != null
              ? stringMatchMap?.entries.lastWhere((element) {
            return element.key
                .allMatches("${children.last.text}$span")
                .isNotEmpty;
          }).key
              : '';

          children.add(TextSpan(text: span, style: stringMatchMap![ks!]));
          return span.toString();
        } else {
          children.add(TextSpan(text: span, style: style));
          return span.toString();
        }
      },
      onMatch: (Match m) {
        matches.add(m[0]!);
        final RegExp? k = patternMatchMap?.entries.firstWhere((element) {
          return element.key.allMatches(m[0]!).isNotEmpty;
        }).key;

        final String? ks = stringMatchMap?[m[0]] != null
            ? stringMatchMap?.entries.firstWhere((element) {
          return element.key.allMatches(m[0]!).isNotEmpty;
        }).key
            : '';
        if (deleteOnBack!) {
          if ((isBack(text!, _lastValue) && m.end == selection.baseOffset)) {
            WidgetsBinding.instance.addPostFrameCallback((_) {
              children.removeWhere((element) => element.text! == text);
              text = text!.replaceRange(m.start, m.end, "");
              selection = selection.copyWith(
                baseOffset: m.end - (m.end - m.start),
                extentOffset: m.end - (m.end - m.start),
              );
            });
          } else {
            children.add(
              TextSpan(
                text: m[0],
                style: stringMatchMap == null
                    ? patternMatchMap![k]
                    : stringMatchMap![ks],
              ),
            );
          }
        } else {
          children.add(
            TextSpan(
              text: m[0],
              style: stringMatchMap == null
                  ? patternMatchMap![k]
                  : stringMatchMap![ks],
            ),
          );
        }
        final resultMatchIndex = matchValueIndex(m);
        if (resultMatchIndex != null && onMatchIndex != null) {
          matchIndex.add(resultMatchIndex);
          onMatchIndex!(matchIndex);
        }

        return (onMatch(List<String>.unmodifiable(matches)) ?? '');
      },
    );
    return children;
  }
}

至此可以看到效果图中@张三 高亮显示了。

三、使用TextFieldController测试@张三 高亮

调整好TextFieldController后，我这里测试@张三 高亮

我们进行初始化TextFieldController

// Add a controller
  late TextFieldController _controller;

  @override
  void initState() {
    // TODO: implement initState
    _controller = TextFieldController(
      patternMatchMap: {
        //
        //* Returns every Hashtag with red color
        //
        RegExp(r"@[^\s]+\s?"):TextStyle(color:Colors.green),
        //
        //* Returns every Hashtag with red color
        //
        RegExp(r"\B#[a-zA-Z0-9]+\b"):TextStyle(color:Colors.red),
        //
        //* Returns every Mention with blue color and bold style.
        //
        RegExp(r"\B@[a-zA-Z0-9]+\b"):TextStyle(fontWeight: FontWeight.w800 ,color:Colors.blue,),
        //
        //* Returns every word after '!' with yellow color and italic style.
        //
        RegExp(r"\B![a-zA-Z0-9]+\b"):TextStyle(color:Colors.yellow, fontStyle:FontStyle.italic),
        // add as many expressions as you need!
      },
      //* starting v1.2.0
      // Now you have the option to add string Matching!
      // stringMatchMap: {
      //   "String1":TextStyle(color: Colors.red),
      //   "String2":TextStyle(color: Colors.yellow),
      // },
      //! Assertion: Only one of the two matching options can be given at a time!

      //* starting v1.1.0
      //* Now you have an onMatch callback that gives you access to a List<String>
      //* which contains all matched strings
      onMatch: (List<String> matches){
        // Do something with matches.
        //! P.S
        // as long as you're typing, the controller will keep updating the list.
      },
      deleteOnBack: true,
      // You can control the [RegExp] options used:
      regExpUnicode: true,
    );

    super.initState();
  }

在TextField中使用TextFieldController。具体代码如下

TextField(
        minLines: 1,
        maxLines: null,
        keyboardType: TextInputType.multiline,
        textAlignVertical: TextAlignVertical.center,
        autofocus: true,
        focusNode: editFocusNode,
        controller: _controller,
        textInputAction: TextInputAction.send,
        decoration: InputDecoration(
          contentPadding: EdgeInsets.symmetric(vertical: 10, horizontal: 8.0),
          filled: true,
          isCollapsed: true,
          floatingLabelBehavior: FloatingLabelBehavior.never,
          hintText: "说点什么吧～",
          hintStyle: TextStyle(
            fontSize: 14,
            fontWeight: FontWeight.w400,
            fontStyle: FontStyle.normal,
            color: ColorUtil.hexColor(0xACACAC),
            decoration: TextDecoration.none,
          ),
          enabledBorder: OutlineInputBorder(
            /*边角*/
            borderRadius: const BorderRadius.all(
              Radius.circular(5.0), //边角为30
            ),
            borderSide: BorderSide(
              color: ColorUtil.hexColor(0xf7f7f7), //边框颜色为绿色
              width: 1, //边线宽度为1
            ),
          ),
          focusedBorder: OutlineInputBorder(
            borderRadius: const BorderRadius.all(
              Radius.circular(5.0), //边角为30
            ),
            borderSide: BorderSide(
              color: ColorUtil.hexColor(0xECECEC), //边框颜色为绿色
              width: 1, //宽度为1
            ),
          ),
        ),
      )

经过输入删除测试，输入的“@张三”高亮显示在TextField中正常了。

使用TextEditingController的buildTextSpan，可以查看：https://blog.csdn.net/gloryFlow/article/details/132889374
完善TextField输入框匹配正则表达式高亮显示，可以查看：https://blog.csdn.net/gloryFlow/article/details/132899084

四、小结

flutter聊天界面-TextField输入框buildTextSpan实现@功能展示高亮功能。自定义修改TextEditingController。
内容较多，描述可能不准确，请见谅。

本文地址：https://blog.csdn.net/gloryFlow/article/details/132899084

学习记录，每天不停进步。

BruceGwo
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Flutter GetX 实现 ChatGPT 简单聊天界面
萌动小彩笔的博客
03-24 6659
Flutter 是一款跨平台的移动应用开发框架，而 GetX 是 Flutter 中一种简单易用的状态管理和路由管理工具。本篇我们将使用 Flutter 和 GetX 实现一个简单的聊天界面，以与 ChatGPT 进行交互。
Flutter 正则表达式控制TextField输入框内容
muzihaoi的博客
10-23 2471
Flutter 正则表达式控制TextField输入框内容 1、添加InputFormatter类继承TextInputFormatter，更加输入根据正则表达式进行匹配，匹配成功返回新的内容，不成功就不让输入 class InputFormatter extends TextInputFormatter { final String regExp; InputFormatter(this.regExp); @override TextEditingValue formatEditUpdat
flutter聊天界面-TextField输入框buildTextSpan实现@功能展示高亮功能
一名开发者
09-14 1531
flutter聊天界面-TextField输入框buildTextSpan实现@功能展示高亮功能最近有位朋友讨论的时候，提到了输入框的高亮展示。在flutter TextField中需要插入特殊样式的标签，比如：“请 @张三 回答一下”，这一串字符在TextField中输入，当输入@时 弹出好友列表选择，然后将 “@张三”高亮显示在TextField中。效果图如下。
Flutter 中的 @protected 详解与使用
最新发布
爱喝水程序员的博客
05-06 312
是 Flutter 中一个功能强大且实用的工具，可以帮助开发者提高代码的封装性、安全性、可重用性。旨在限制成员的可见性，从而提高代码的封装性和安全性。它与 Dart 中的。还可以与其他特性结合使用，实现更加灵活的访问控制。关键字不同，后者仅限于在同一文件中定义的成员可见。可以使代码更加清晰、易懂、易维护。在 Flutter 开发中，除了上述基本用法之外，
flutter 微信聊天输入框
唐僧的专栏
02-28 9113
高仿微信聊天输入框，效果图如下（目前都是静态展示，服务还没开始开发）：大家如果观察仔细的话 应该会发现，；所以在这里就需要监听软键盘的高度 （）（第二张动图 是github上的不知道能放多久）遇到有个问题就是：这里这只,就能自适应高度了。就能做到TextField多行输入了代码结构如下：------ chat_bottom.dart 聊天底部输入框------ chat_element_other.dart 聊天时别人信息的显示。
Flutter 学习 - Widget 之 对话框
迷途小顽童
08-17 532
前言 本篇我们介绍Flutter中常用的对话框，先看下效果图 正文 Flutter 中对话框也是Widget，有两种显示对话框的方法，对于对画框对使用还有特殊要求，我们后面介绍，先来看下这两种方法 1.showAboutDialog() 2.showDialog() 我们来逐一看下这两个方法 关于对话框 – showAboutDialog() 使用方法 showAbou...
flutter-autocomplete-textfield：用于flutter的自动完成文本字段
02-03
autocomplete_textfield 颤振的自动完成文本字段 拉取请求 随意提交请求请求以进行所需的更改/功能/错误修复...由于我不再频繁使用Flutter，这使此代码的维护变得更加容易。 酒吧包可以在找到 重大变化 默认情况下...
flutter 输入框组件TextField的实现代码
08-25
Flutter 输入框组件TextField 的实现代码详解 在 Flutter 中，TextField 是一个非常重要的组件，用于用户输入文本信息。这篇文章将详细介绍 Flutter 中 TextField 的实现代码，包括其构造方法、基本使用方式、属性...
flutter实现输入框撤销、重写功能
06-16
在Flutter开发中，创建具有撤销和重写功能的输入框是一项常见的需求，这通常涉及到文本编辑和用户交互的增强。本篇文章将详细讲解如何利用Flutter的Widget和数据结构来实现这个功能。 首先，我们需要理解撤销和重做...
正则表达式只可以输入只允许输入中文、数字、字母、下划线
08-19
### 正则表达式知识点详解...对于特定的需求，比如本例中的限制字符串只能包含中文、数字、字母和下划线，我们可以构建出精确的正则表达式，并通过编程语言来实现这些功能。这对于数据验证、格式化等应用场景非常有用。
Flutter 完美的验证码输入框实现
08-19
Flutter 完美的验证码输入框实现 在本文中，我们将介绍如何在 Flutter 中实现完美的验证码输入框。该实现涉及到多个阶段的尝试和探索，终于找到了一种完美的解决方案。 第一个阶段：修改TextField控件 在开始的...
使用DartAngel和Flutter构建实时聊天应用程序
08-10
使用Dart - Angel 和 Flutter 构建实时聊天应用程序
flutter 自适应宽高气泡框，聊天气泡框
qq_35629609的博客
07-18 663
还有的就是通过算child 然后动态计算气泡框宽高，脱裤子💨，放到listview 刷新数据还会丢ui，因为要算某一个widget 的大小，必须是已经加载过，然后你再刷新listview然后更新大小。不管是text内容，还是布局大小你要计算那就GG。Container 红色正方形 然后 你剪切绘制成 气泡框的样子，然后 夹角长， 你直接Container padding 个夹角长度 ，内容不就显示全了么？看看我发表时间，我真的潦草一下博客吧。网上好多气泡框，都让写固定宽高，无法自适应文本内容。
Flutter | TextField 禁止开头输入空格（正则）
无夜之星辰的博客
08-25 1575
这是一个很常见的需求，不允许开头输空格。
【实战】我是如何在输入框实现@ At功能的
程序员成长指北
12-21 1379
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群作者：InfinityTomorrow 授权转载链接：https://juejin.c...
Flutter实战一Flutter聊天应用（十三）
咖啡花园
06-28 2827
提交用户的注册信息我们现需要将用户的注册信息保存到Firebase实时数据库，在Firebase控制台中，更改Firebase实时数据库的安全规则，选择“Database > 规则”，规则如下所示：{ "rules": { "users":{ ".read": true, ".write": true }, "messages": {
flutter聊天界面-聊天列表 下拉加载更多历史消息
一名开发者
07-08 2679
flutter聊天界面-聊天列表 下拉加载更多历史消息，主要实现Column中使用Expand嵌套ListView布局，设置reverse、physics、ScrollBehavior。可以解决reverse为true首导致顶部大片空白问题，去除ListView滑动波纹。之后在消息的最后一条设置为加载更多消息指示器与没有更多消息提示。
Flutter中的七种对话框相关组件使用方法
技术应让更广泛的人群流入到实际产品开发中才是正统
10-12 664
自定义创建。你可以创建自定义对话框以满足特定需求。这通常需要使用Flutter的Widget来构建自定义内容。Text("自定义对话框示例"),Text("这是自定义的内容。"),},child: Text("关闭"),),],),),},
flutter 封装评论回复弹出键盘输入框组件
Emperor灬fly的博客
09-03 3026
       本来打算开启下一段作死旅行的，后来想了想还是先把flutter这段不堪回首的作死往事总结一下吧，好了，如之前的博文一样，不知不觉又开始废话连篇了。（ps：这么爱讲废话，不知道自己去日记）。        这次flutter重构之旅包含部分社区的功能，社区又怎么能少了正常的用户交流呢，所以一个评论回复而且能发图不发种，xx万人捅的发布组件呼之欲出。思来想去，
Flutter TextField 手机号正则表达式输入框
06-06
好的，关于 Flutter TextField 手机号正则表达式输入框，可以这样实现： ```dart TextField( decoration: InputDecoration( labelText: '手机号', hintText: '请输入手机号', ), keyboardType: TextInputType....
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值