如何使用 Flutter 编写带有数字点的段落？答案

【问题标题】：How can I write a paragraph with number points using Flutter?如何使用 Flutter 编写带有数字点的段落？
【发布时间】：2020-03-24 03:33:46
【问题描述】：

使用 HTML，我可以将有序列表点添加到这样的段落：

<ol>
  <li>Kopi</li>
  <li>Teh</li>
</ol>

如何在 Flutter 中编写有序列表点形式？

new Text(''),

【问题讨论】：

你看起来像这样吗？ stackoverflow.com/a/49626832/7924072
是的。但我想编号列表，如下所示：1. Kopi，2.Teh。
您是否在列表中有这些名字或添加您拥有的任何真实情况。

标签： flutter text html-lists

【解决方案1】：

你可以使用包https://pub.dev/packages/flutter_html
代码sn-p

Html(
            data: """
    <ol>
      <li>Kopi</li>
      <li>Teh</li>
    </ol>
  """,
            //Optional parameters:
            padding: EdgeInsets.all(8.0),
            linkStyle: const TextStyle(

工作演示

完整代码

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:html/dom.dart' as dom;

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: SingleChildScrollView(
          child: Html(
            data: """
    <ol>
      <li>Kopi</li>
      <li>Teh</li>
    </ol>
  """,
            //Optional parameters:
            padding: EdgeInsets.all(8.0),
            linkStyle: const TextStyle(
              color: Colors.redAccent,
              decorationColor: Colors.redAccent,
              decoration: TextDecoration.underline,
            ),
            onLinkTap: (url) {
              print("Opening $url...");
            },
            onImageTap: (src) {
              print(src);
            },
            //Must have useRichText set to false for this to work
            customRender: (node, children) {
              if (node is dom.Element) {
                switch (node.localName) {
                  case "custom_tag":
                    return Column(children: children);
                }
              }
              return null;
            },
            customTextAlign: (dom.Node node) {
              if (node is dom.Element) {
                switch (node.localName) {
                  case "p":
                    return TextAlign.justify;
                }
              }
              return null;
            },
            customTextStyle: (dom.Node node, TextStyle baseStyle) {
              if (node is dom.Element) {
                switch (node.localName) {
                  case "p":
                    return baseStyle.merge(TextStyle(height: 2, fontSize: 20));
                }
              }
              return baseStyle;
            },
          ),
        ),
      ),
    );
  }
}

【讨论】：