如何在颤动中制作带有前缀图标的段落答案

【问题标题】：How to make paragraph with prefix icon in flutter如何在颤动中制作带有前缀图标的段落
【发布时间】：2021-02-24 03:34:05
【问题描述】：

和标题一样

我想写一段

移动到下一行的时候，应该有如下图的空格..

图片：https://i.stack.imgur.com/izB97.png

帮帮我

【问题讨论】：

标签： flutter dart

【解决方案1】：

你可以像这样创建一个简单的类：

import 'package:flutter/material.dart';
class Paragraph extends StatelessWidget {
    Paragraph(this.items);
    final List<ParagraphItem> items;

    @override
    Widget build(BuildContext context) {
        var elements = <Widget>[];
        for (var item in items) {
            elements.add(item);
            elements.add(SizedBox(height: 10.0));
        }

        return Column(children: elements);
   } 
}

class ParagraphItem extends StatelessWidget {
    ParagraphItem(this.text, this.icon);
    final String text;
    final Icon icon;

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

然后添加一个新段落：

Paragraph([
    ParagraphItem('Example text', Icon(Icons.mail)),
])

【讨论】：

但是前缀的位置不正确。它应该在第一行的中间，但它太向上了。
如果分配 CrossAxisAlignment.center 属性，则在换行时前缀会移动到段落的中心。
应该修复 CrossAxisAlignment.start！
但是如果我用 CrossAxisAlignment.start 修改它，它不在中心。它位于稍上方。

【解决方案2】：

不确定您的段落会有多长，但您可以查看：ListTile

【讨论】：

【解决方案3】：

您可以通过多种方式获得结果。请看下面的代码，我已经演示了两种可能的方法 (1) 创建您自己的自定义小部件 (2) 使用 Google 团队的 flutter_markdown 包。

import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Paragraph Demo"),
        ),
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Column(
          children: [
            Expanded(
              flex: 0,
              child: Text(
                "Custom Widget",
                style: TextStyle(fontSize: 20),
              ),
            ),
            Expanded(
              flex: 1,
              child: RowParagraph(text: '''
This is the first list item. This is the first list item. This is the first list item. This is the first list item. This is the first list item. This is the first list item.
Here's the second list item. Here's the second list item. Here's the second list item. Here's the second list item. Here's the second list item. Here's the second list item. 
And here's the third list item. And here's the third list item. And here's the third list item. And here's the third list item. And here's the third list item. And here's the third list item. 
              '''),
            ),
            Expanded(
              flex: 0,
              child: Text(
                "Markdown Widget",
                style: TextStyle(fontSize: 20),
              ),
            ),
            Expanded(
              flex: 1,
              child: MarkdownParagraph(text: '''
*   This is the first list item. This is the first list item. This is the first list item. This is the first list item. This is the first list item. This is the first list item.
*   Here's the second list item. Here's the second list item. Here's the second list item. Here's the second list item. Here's the second list item. Here's the second list item. 
*   And here's the third list item. And here's the third list item. And here's the third list item. And here's the third list item. And here's the third list item. And here's the third list item. 
              '''),
            )
          ],
        ),
      ),
    );
  }
}

class RowParagraph extends StatelessWidget {
  final String text;

  const RowParagraph({Key key, this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        for (int i = 0; i < text.split("\n").length - 1; i++) ...[
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 5),
                child: Text("•"),
              ),
              Expanded(
                child: Text(
                  text.split("\n")[i],
                  textAlign: TextAlign.justify,
                ),
              ),
            ],
          ),
          SizedBox(
            height: 5,
          ),
        ],
      ],
    );
  }
}

class MarkdownParagraph extends StatelessWidget {
  final String text;

  const MarkdownParagraph({Key key, this.text}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Markdown(
      styleSheet: MarkdownStyleSheet(
        p: TextStyle(color: Colors.white),
      ),
      data: text,
    );
  }
}

【讨论】：