flutter 如何根据用户输入将文本字段text-direction动态本地化为rtl或ltr方向

k4emjkb1  于 2023-03-19  发布在  Flutter
关注(0)|答案(2)|浏览(117)

我需要一个文本字段,改变其方向的基础上,用户输入。
例如,我有一个获取用户输入的文本字段,但此输入有时可能是从左到右方向的英语文本,有时是从右到左方向的阿拉伯语文本。我希望文本字段方向根据输入语言方向进行更改

我拥有的

  • 假设我有一个普通的文本字段
class MyDynamicTextField extends StatelessWidget {
  const MyDynamicTextField({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 40),
          child: TextField(),
        ),
      ),
    );
  }
}

我需要什么

如何模仿WhatsApp聊天文本域或Chrome文本域的文本方向行为,同时输入不同语言和文本方向的文本?
例如:文本字段的文本方向变化取决于用户输入语言(在Chrome中)

bpsygsoo

bpsygsoo1#

解决方案是根据第一个输入字符更改文本方向

创建一个函数,该函数使用字符的代码单元(utf-16)识别从右到左的字符,并返回一个表示输入语言文本方向的TextDirection

TextDirection getDirection(String v) {
  final string = v.trim();
  if (string.isEmpty) return TextDirection.ltr;
  final firstUnit = string.codeUnitAt(0);
  if (firstUnit > 0x0600 && firstUnit < 0x06FF ||
      firstUnit > 0x0750 && firstUnit < 0x077F ||
      firstUnit > 0x07C0 && firstUnit < 0x07EA ||
      firstUnit > 0x0840 && firstUnit < 0x085B ||
      firstUnit > 0x08A0 && firstUnit < 0x08B4 ||
      firstUnit > 0x08E3 && firstUnit < 0x08FF ||
      firstUnit > 0xFB50 && firstUnit < 0xFBB1 ||
      firstUnit > 0xFBD3 && firstUnit < 0xFD3D ||
      firstUnit > 0xFD50 && firstUnit < 0xFD8F ||
      firstUnit > 0xFD92 && firstUnit < 0xFDC7 ||
      firstUnit > 0xFDF0 && firstUnit < 0xFDFC ||
      firstUnit > 0xFE70 && firstUnit < 0xFE74 ||
      firstUnit > 0xFE76 && firstUnit < 0xFEFC ||
      firstUnit > 0x10800 && firstUnit < 0x10805 ||
      firstUnit > 0x1B000 && firstUnit < 0x1B0FF ||
      firstUnit > 0x1D165 && firstUnit < 0x1D169 ||
      firstUnit > 0x1D16D && firstUnit < 0x1D172 ||
      firstUnit > 0x1D17B && firstUnit < 0x1D182 ||
      firstUnit > 0x1D185 && firstUnit < 0x1D18B ||
      firstUnit > 0x1D1AA && firstUnit < 0x1D1AD ||
      firstUnit > 0x1D242 && firstUnit < 0x1D244) {
    return TextDirection.rtl;
  }
  return TextDirection.ltr;
}

现在将TextField Package 在ValueListenableBuilder<TextDirection>中,并在更改文本字段中的文本时更改文本方向:

class MyDynamicTextField extends StatelessWidget {
  MyDynamicTextField({Key? key}) : super(key: key);

  final ValueNotifier<TextDirection> _textDir =
      ValueNotifier(TextDirection.ltr);

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 40),
          child: ValueListenableBuilder<TextDirection>(
            valueListenable: _textDir,
            builder: (context, value, child) => 

              TextField(
                textDirection: value,
                onChanged: (input) {
                  if (input.trim().length < 2) {
                    final dir = getDirection(input);
                    if (dir != value) _textDir.value = dir;
                  }
                },
              ),
            
          ),
        ),
      ),
    );
  }
}
4nkexdtk

4nkexdtk2#

存在确定文本方向的内置函数。

import 'package:intl/intl.dart' as intl;

final isRTL = intl.Bidi.detectRtlDirectionality("some text")

相关问题