如何使用 Flutter 编写带有要点的段落？

Question

使用 HTML，我可以像这样在段落中添加项目符号：

<ul>
   <li> example </li>
   <li> example </li>
   <li> example </li>
<ul>

如何在 Flutter 中编写项目符号表？

new Text(''),

Answer 1

如果您不想下载另一个库（例如 flutter_markdown），并且您的一个或多个列表项包含跨越多行的冗长文本，我会选择 Raegtime 的答案。但是，由于它假定一个带有换行符的字符串，我想为带有字符串的列表制作一个版本，这是一种更常见的情况。在下面的代码中，Column 使列表项出现在不同的行中，Row 使项目符号点在其下方有空白。

import 'package:flutter/material.dart';

class UnorderedList extends StatelessWidget {
  UnorderedList(this.texts);
  final List<String> texts;

  @override
  Widget build(BuildContext context) {
    var widgetList = <Widget>[];
    for (var text in texts) {
      // Add list item
      widgetList.add(UnorderedListItem(text));
      // Add space between items
      widgetList.add(SizedBox(height: 5.0));
    }

    return Column(children: widgetList);
  }
}

class UnorderedListItem extends StatelessWidget {
  UnorderedListItem(this.text);
  final String text;

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text("• "),
        Expanded(
          child: Text(text),
        ),
      ],
    );
  }
}

我们可以这样使用它：

UnorderedList([
    "What conclusions can we draw from the implementation?",
    "Are there any changes that need to be introduced permanently?"
])

并得到结果：

Answer 2

为此使用降价是大材小用。使用• 字符要容易得多。

如果您懒得复制粘贴字符，这里有一个自定义的Text 可以为您完成：

class Bullet extends Text {
  const Bullet(
    String data, {
    Key key,
    TextStyle style,
    TextAlign textAlign,
    TextDirection textDirection,
    Locale locale,
    bool softWrap,
    TextOverflow overflow,
    double textScaleFactor,
    int maxLines,
    String semanticsLabel,
  }) : super(
          '• ${data}',
          key: key,
          style: style,
          textAlign: textAlign,
          textDirection: textDirection,
          locale: locale,
          softWrap: softWrap,
          overflow: overflow,
          textScaleFactor: textScaleFactor,
          maxLines: maxLines,
          semanticsLabel: semanticsLabel,
        );
}

Answer 3

我尝试使用flutter_markdown，它似乎有效。当然，您可以根据需要将其更改为编号/有序或无序列表。

import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:flutter/material.dart';
void main() => runApp(Demo());


class Demo extends StatelessWidget {
  final testData = ["Example1", "Example2", "Example3", "Example100"];



  @override
  Widget build(BuildContext context) {
    final _markDownData = testData.map((x) => "- $x\n").reduce((x, y) => "$x$y");

    return MaterialApp(
        home: Scaffold(
      body: Container(
        margin: EdgeInsets.all(40.0),
        child: Markdown(data: _markDownData)),
    ));
  }
}

Answer 4

我最好使用 utf 代码。对于列表，我认为更舒适的是：

class DottedText extends Text {
  const DottedText(String data, {
    Key key,
    TextStyle style,
    TextAlign textAlign,
    TextDirection textDirection,
    Locale locale,
    bool softWrap,
    TextOverflow overflow,
    double textScaleFactor,
    int maxLines,
    String semanticsLabel,
  }) : super(
    '\u2022 $data',
    key: key,
    style: style,
    textAlign: textAlign,
    textDirection: textDirection,
    locale: locale,
    softWrap: softWrap,
    overflow: overflow,
    textScaleFactor: textScaleFactor,
    maxLines: maxLines,
    semanticsLabel: semanticsLabel,);
}

Answer 5

@Snurrig - 很好的答案。效果很好！非常感谢！

修改它以创建有序/编号列表。 见下文：

class OrderedList extends StatelessWidget {
  OrderedList(this.texts);
  final List<dynamic> texts;

  @override
  Widget build(BuildContext context) {
    var widgetList = <Widget>[];
    int counter = 0;
    for (var text in texts) {
      // Add list item
      counter++;
      widgetList.add(OrderedListItem(counter, text));
      // Add space between items
      widgetList.add(SizedBox(height: 5.0));
    }

    return Column(children: widgetList);
  }
}

class OrderedListItem extends StatelessWidget {
  OrderedListItem(this.counter, this.text);
  final int counter;
  final String text;

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text("$counter. "),
        Expanded(
          child: Text(text),
        ),
      ],
    );
  }
}

Answer 6

您可以使用LineSplitter、Row、Column 和 ASCII 项目符号。你只需要一个带换行符的字符串。

String myStringWithLinebreaks = "Line 1\nLine 2\nLine 3";

ListTile 中的示例

 ListTile(
                  title: Text("Title Text"),
                  subtitle: 
                    Column(
                      children: LineSplitter.split(myStringWithLinebreaks).map((o) {
                    return Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text("• "),
                        Expanded(
                          child: Text(o),
                        )
                      ],
                    );
                  }).toList())),

Answer 7

 Row(
   children: [
             _buildBullet(),
              const SizedBox(width: 5),
              _buildText(),
              ],
  ),

  SizedBox _buildBullet() {
    return SizedBox(
      height: 7,
      width: 7,
      child: TextButton(
        style: TextButton.styleFrom(
          backgroundColor: Color(0xFFF8B407),
          shape: const CircleBorder(),
        ),
        child: const Text(''),
        onPressed: () {},
      ),
    );
  }

  Text _buildText() {
    return const Text(
      'Lorem Ipsum is simply dummy text of the printing and typesetting',
      style: TextStyle(fontSize: 24, color: Colors.white),
    );
  }