Создавать маркеры во флаттере

Aug 18 2020

Я пытаюсь ввести пользовательский ввод, используя textField во флаттере, но я хочу использовать его в качестве маркерного списка. Я думал, что мне, возможно, придется использовать пакет под названием flutter_markdown, но до сих пор не знаю, как это сделать. Как будто каждая последняя строка должна автоматически начинаться с маркера.

Ответы

1 JigarPatel Aug 18 2020 at 18:47

Один из способов сделать это - примерно так.

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  TextEditingController tc = TextEditingController();
  int currentTextLength = 0;
  
  @override
  Widget build(BuildContext context) {
    return TextField(
      maxLines: 4,
      controller: tc,
      onChanged: (String newText){
        if(newText[0] != '•'){
          newText = '• ' + newText;
          tc.text = newText;
          tc.selection = TextSelection.fromPosition(TextPosition(offset: tc.text.length));
        }
        if(newText[newText.length - 1] == '\n' && newText.length > currentTextLength){
          tc.text = newText + '• ';
          tc.selection = TextSelection.fromPosition(TextPosition(offset: tc.text.length));
        }
        currentTextLength = tc.text.length;
      }
    );
  }
}

Примечание: это не идеальное решение. Поскольку он не будет ставить маркеры, если вы начнете редактировать текст в середине существующего текста. Но, возможно, это даст вам начало в каком-то направлении.

2 JupiterChan Aug 18 2020 at 15:46

Если вы хотите иметь маркированный список текстовых полей, flutter_markdown может вам не подойти. Поскольку он показывает текст уценки.

TextFormField(
              decoration: InputDecoration(
                border: InputBorder.none, prefix: Text("."), // Or a Dot image
              ),
            ),
sleepingkit Aug 19 2020 at 12:09

Если вы хотите иметь текстовое поле с функцией маркеров, этот пакет может вам подойти:

https://pub.dev/packages/zefyr

Это сложно, если вы напишете это самостоятельно.

Посмотрите его пример кода, чтобы узнать, как использовать:

https://github.com/memspace/zefyr/tree/master/packages/zefyr/example/lib