flutter - 如何在 Wrap Flutter 中从同一行开始文本

Question

我想设计一个小部件，开头有一个图标，结尾有一个长文本。

当我将它们包装在 Row 小部件中时，我得到以下结果，因为 Row 不支持多行:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Icon(Icons.face),
        Text(
          'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.',
          maxLines: 5,
        ),
      ],
    );
  }
}

但是当我将它们包装在 Wrap 小部件中时，我克服了溢出问题，但是，因为 Text 与 Icon 是不同的小部件>，从第二行开始，如下图:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: [
        Icon(Icons.face),
        Text(
          'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.',
          maxLines: 5,
        ),
      ],
    );
  }
}

我怎样才能得到如下图所示的结果(明显经过 Photoshop 处理):

Answer 1

使用富文本

import 'dart:ui';
import 'dart:ui' as ui show PlaceholderAlignment;

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(appBar: AppBar(), body: MyWidget()),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RichText(
      maxLines: 5,
      text: TextSpan(children: [
        WidgetSpan(
          alignment: ui.PlaceholderAlignment.middle,
          child: Icon(Icons.face),
        ),
        TextSpan(
          text: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.',
          style: TextStyle(color: Colors.black, fontSize: 16),
        ),
      ]),
    );
  }
}