Flutter Wrap 不适用于大文本

Question

我需要一些帮助来创建一系列连续的小部件，一个接一个，当第一个结束时，另一个直接出现。

我尝试使用 Wrap，但 Text 很长，并且占用的宽度超过了整个宽度，因此其他小部件位于 Text 下方，而不是在它之后，即使 Text 之后有空格

import 'package:flutter/material.dart';

class Testee extends StatefulWidget {
  @override
  _TesteeState createState() => _TesteeState();
}

class _TesteeState extends State<Testee> {
  String loremOne =
      "Nostrud cillum ea do sit eu sint reprehenderit est tempor amet. Ex minim cupidatat exercitation officia mollit occaecat dolor sint sit aliqua dolore velit exercitation duis. Eu cupidatat pariatur aliquip aliquip ipsum sint ad ullamco irure eiusmod velit mollit ut elit.";

  String loremTwo = "Fugiat aute eu tempor et consequat nulla.";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amberAccent,
      body: SafeArea(
        child: Padding(
          padding: EdgeInsets.all(15.0),
          child: ListView(
            children: [
              Wrap(
                direction: Axis.horizontal,
                spacing: 10.0,
                children: [
                  Text(loremOne),
                  Icon(Icons.circle, size: 16),
                  Text(loremOne),
                  Icon(Icons.circle, size: 16),
                  Text(loremTwo),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

图像来理解问题

Answer 1

其实Wrap不是用来分隔文本的，而是Wrap是用来分隔小部件的。

正如@pskink 在评论中所说。 您需要RichText来创建您的小部件，就像您显示的图像一样。

我在Wrap和RichText之间进行了比较。 你可以试试这个代码

import 'package:flutter/material.dart';

class Testee extends StatefulWidget {
  @override
  _TesteeState createState() => _TesteeState();
}

class _TesteeState extends State<Testee> {
  String loremOne =
      "Nostrud cillum ea do sit eu sint reprehenderit est tempor amet. Ex minim cupidatat exercitation officia mollit occaecat dolor sint sit aliqua dolore velit exercitation duis. Eu cupidatat pariatur aliquip aliquip ipsum sint ad ullamco irure eiusmod velit mollit ut elit.";

  String loremTwo = "Fugiat aute eu tempor et consequat nulla.";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amberAccent,
      body: SafeArea(
        child: Padding(
          padding: EdgeInsets.all(15.0),
          child: ListView(
            children: [
              Wrap(
                direction: Axis.horizontal,
                spacing: 10.0,
                children: [
                  Text(loremOne),
                  Icon(Icons.circle, size: 16),
                  Text(loremOne),
                  Icon(Icons.circle, size: 16),
                  Text(loremTwo),
                ],
              ),
              //may you can compare your wrap with Richtext below
              RichText(
                  text: TextSpan(children: [
                TextSpan(text: loremOne),
                WidgetSpan(child: Icon(Icons.circle, size: 16)),
                TextSpan(text: loremOne),
                WidgetSpan(child: Icon(Icons.circle, size: 16)),
                TextSpan(text: loremTwo),
              ]))
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

我推荐你使用AutoSizeText package ，它非常有用！