flutter Textfield与自动文本方向

发布于 2025-01-28 17:23:14 字数 370 浏览 3 评论 0原文

我想在flutter中使用 textfield 输入两种语言 （其中一个是rtl，另一种是ltr））输入每行。如何做到这一点，以使 textDirection 在Textfield中正确显示该行？这是在WhatsApp和消息应用程序中正确完成的。我该如何在颤抖中做到这一点？

原文

分享到QQ

分享到微博

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

发布评论

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

违心° 2025-02-04 17:23:14

您可以使用任何文本编辑器插件，例如： flutter_quill ， html_editor_enhanced ，

import 'package:fleather/fleather.dart';
import 'package:flutter/material.dart';

class FlexibleDir extends StatefulWidget {
  const FlexibleDir({super.key});
  @override
  State<FlexibleDir> createState() => _FlexibleDirState();
}

class _FlexibleDirState extends State<FlexibleDir> {
  FleatherController? _controller;

  @override
  void initState() {
    super.initState();
    if (mounted) {
      _controller = FleatherController();
    }
  }

  @override
  void dispose() {
    if (!mounted) _controller?.dispose();
    super.dispose();
  }

  String get text => _controller!.plainTextEditingValue.text;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              'Multi direction field',
              style: Theme.of(context).textTheme.labelLarge,
            ),
            Container(
              height: 80,
              width: 200,
              decoration: BoxDecoration(
                  color: Colors.yellow[300],
                  borderRadius: BorderRadius.circular(8)),
              child: FleatherEditor(
                controller: _controller!,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

you can use any text editor plugin e.g: flutter_quill, html_editor_enhanced, fleather, .. .
I used fleather and I think it's the best Flutter text editor
you can use the editor area only without the editor bar, and this is the samble code to use it:

import 'package:fleather/fleather.dart';
import 'package:flutter/material.dart';

class FlexibleDir extends StatefulWidget {
  const FlexibleDir({super.key});
  @override
  State<FlexibleDir> createState() => _FlexibleDirState();
}

class _FlexibleDirState extends State<FlexibleDir> {
  FleatherController? _controller;

  @override
  void initState() {
    super.initState();
    if (mounted) {
      _controller = FleatherController();
    }
  }

  @override
  void dispose() {
    if (!mounted) _controller?.dispose();
    super.dispose();
  }

  String get text => _controller!.plainTextEditingValue.text;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              'Multi direction field',
              style: Theme.of(context).textTheme.labelLarge,
            ),
            Container(
              height: 80,
              width: 200,
              decoration: BoxDecoration(
                  color: Colors.yellow[300],
                  borderRadius: BorderRadius.circular(8)),
              child: FleatherEditor(
                controller: _controller!,
              ),
            ),
          ],
        ),
      ),
    );
  }
}