Flutter

Question

我有这个代码：

import 'package:flutter/material.dart';

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

class mainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Chat(),
    );
  }
}

class Chat extends StatefulWidget {
  const Chat({Key? key}) : super(key: key);

  @override
  _ChatState createState() => _ChatState();
}

class _ChatState extends State<Chat> {
  List<Container> myList = [
    Container(
      child: Text(
        'Hello, my name ',
        style: TextStyle(fontSize: 25.0),
      ),
    ),
    Container(
      color: Colors.orange,
      child: Text(
        'is',
        style: TextStyle(fontSize: 25.0),
      ),
    ),
    Container(
      child: Text(
        ' Gabriele, and i am 21 years old!',
        style: TextStyle(fontSize: 25.0),
      ),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Wrap(
          children: myList,
        ),
      ),
    );
  }
}

这是我当前的输出：

这是我想要得到的输出：（我希望 myList 的最后一个容器不要立即换行）。有人知道我该怎么做吗？

希望你能帮助我。

谢谢:)

Answer 1

在这种情况下，您可以使用 RichText 而不是 Wrap。

RichText(
  text: TextSpan(
    style: TextStyle(fontSize: 25.0),
    children: [
      TextSpan(text: 'Hello, my name '),
      TextSpan(
          text: 'is',
          style: TextStyle(
            backgroundColor: Colors.amber,
          )),
      TextSpan(text: ' Gabriele, and i am 21 years old!'),
    ],
  ),
),

如果您需要在文本旁边包含其他简单内容，您可以用 WidgetSpan 包装小部件并在 TextSpan 上用作 children。

RichText(
  text: TextSpan(
    style: TextStyle(fontSize: 25.0),
    children: [
      TextSpan(text: 'Hello, my name '),
      WidgetSpan(
          child: Container(
        color: Colors.green,
        width: 40,
        height: 40,
      )),

Flutter - Wrap：不要用文字换行

Flutter - Wrap: do not wrap with text

dart

flutter-layout

flutter-text