Flutter Wrap 不适用于大文本

Question

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

I tried to use Wrap, but the Text is long and it takes more than the full width, so the other widget goes under the Text, not after it, even that there is space after the 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),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

image to understand the problem

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

我推荐你使用AutoSizeTextpackage，非常有用！

Flutter Wrap 不适用于大文本

Flutter Wrap is not working with large text

dart

flutter

flutter-dependencies

flutter-layout