如何在Flutter的多行文本字段中添加前缀？

Question

我需要为多行文本字段中的每一行添加行号前缀。如下图所示：

- Phanindra

---

能否提供更多细节？ - Delwinn

@Delwinn。比如说，每当我在多行文本字段中移动到下一行时，应该有一个行号前缀。现在我希望你明白了我的疑问。你可以查看问题中添加的图片。 - Phanindra

您想让该数字可选和可复制吗？ - Csaba Mihaly

@CsabaMihaly 不需要。只需使内容可选择。 - Phanindra

Answer 1

'\n'.allMatches(_controller.toString()).length + 1 可以获取控制器中的行数。我将行号显示在了一个单独的小部件中。

如果你想要将行号添加到文本本身中，你可以创建一个回调函数，在每个换行符处触发并在行的开头添加一个数字，但这需要更多时间来正确完成。

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key});

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

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  final TextStyle _style = const TextStyle(fontSize: 15);
  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: Row(
        children: [
          SizedBox(
            width: 30,
            height: double.infinity,
            child: ListView.builder(
              itemCount: '\n'.allMatches(_controller.toString()).length + 1,
              itemBuilder: (BuildContext context, int index) {
                return Text('${index + 1}.', style: _style,);
              },
            ),
          ),
          Expanded(
            child: Container(
              padding: const EdgeInsets.only(top:5),
              alignment: Alignment.topLeft,
              child: TextField(
                decoration: const InputDecoration.collapsed(hintText: 'Text'),
                style: _style,
                keyboardType: TextInputType.multiline,
                maxLines: null,
                controller: _controller,
                onChanged: (value) => setState(() {}),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

- Csaba Mihaly

---

这将无法处理换行后的长行。 - Elisha

你需要对文本进行预处理，仅为小部件制作副本，在窗口宽度以下的空格处插入换行符。 - Csaba Mihaly