text - 如何使用 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?"
])

并得到结果: