สร้างสัญลักษณ์แสดงหัวข้อย่อยในการกระพือ

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 อาจไม่เหมาะสำหรับคุณ เนื่องจากมันแสดงข้อความ 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