如何根据用户对 rtl 或 ltr 方向的输入动态本地化文本字段文本方向
How can I dynamically localize text field text-direction depended on user input to rtl or ltr directions
我需要一个根据用户输入改变方向的文本字段。
例如,我有一个获取用户输入的文本字段,但此输入有时可以是从左到右方向的英文文本,有时是从右到左方向的阿拉伯文文本。我希望根据输入语言方向更改文本字段方向
我有什么
- 假设我有一个普通的文本字段
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)
解决办法是根据第一个输入字符改变文字方向
创建一个函数,使用代码单元 (utf-16) 和 returns 表示输入语言的文本方向的 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
包裹在 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;
}
},
),
),
),
),
);
}
}
我需要一个根据用户输入改变方向的文本字段。
例如,我有一个获取用户输入的文本字段,但此输入有时可以是从左到右方向的英文文本,有时是从右到左方向的阿拉伯文文本。我希望根据输入语言方向更改文本字段方向
我有什么
- 假设我有一个普通的文本字段
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)
解决办法是根据第一个输入字符改变文字方向
创建一个函数,使用代码单元 (utf-16) 和 returns 表示输入语言的文本方向的 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
包裹在 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;
}
},
),
),
),
),
);
}
}