使用HTML,我可以在这样的段落中添加一个项目符号:
<ul>
<li> example </li>
<li> example </li>
<li> example </li>
<ul>
如何在Flutter中编写项目符号表格?
new Text(''),
答案 0 :(得分:5)
如果您不想下载另一个库(例如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?"
])
答案 1 :(得分:2)
我尝试使用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)),
));
}
}
答案 2 :(得分:2)
我最好使用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,);
}
答案 3 :(得分:1)
@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),
),
],
);
}
}
答案 4 :(得分:0)
为此使用降价是过大的。使用•
字符要容易得多。
如果您懒得复制粘贴字符,则可以使用以下自定义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(
'•',
key: key,
style: style,
textAlign: textAlign,
textDirection: textDirection,
locale: locale,
softWrap: softWrap,
overflow: overflow,
textScaleFactor: textScaleFactor,
maxLines: maxLines,
semanticsLabel: semanticsLabel,
);
}
答案 5 :(得分:0)
您可以使用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())),