主页 / coding / 问题 / 79052540
Accepted
vacosti
Asked: 2024-10-04 08:22:45 +0800 CST

用文本包裹图片。RichText 和 Wrap 不起作用

  • 772

我想要的是：

我想在 Flutter 中将一些文本环绕在图像周围。由于已经有很多关于此的问题，我所说的“将一些文本环绕在图像周围”的意思是：

在此处输入图片描述

为了实现这一点，我尝试使用RichText和Wrap类，但没有成功。我得到的结果是：

RichText（Text.rich）[不是我想要的]：

在此处输入图片描述

Scaffold(
      appBar: AppBar(
        title: Text('Wrap Image with text using Rich Text (Text.rich) test'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: SizedBox(
            width: 400,
            child: Text.rich(
              TextSpan(
                children: <InlineSpan>[
                  WidgetSpan(
                    child: Image.network(
                      'https://picsum.photos/250?image=9',
                      width: 200,
                      height: 200,
                    ),
                  ),
                  TextSpan(
                    text:
                        "loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum",
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );

我也尝试在上面的代码中添加，得到以下结果（也不是我想要的）alignment: PlaceholderAlignment.middle：WidgetSpan

在此处输入图片描述

包装[不是我想要的]：

在此处输入图片描述

Scaffold(
      appBar: AppBar(
        title: Text('Wrap Image with text using Wrap test'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: SizedBox(
            width: 400,
            child: Wrap(
              children: [
                Image.network(
                  'https://picsum.photos/250?image=9',
                  width: 200,
                  height: 200,
                ),
                Text(
                  "loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum",
                )
              ],
            ),
          ),
        ),
      ),
    );

我怎样才能在 Flutter 中实现我想要的？

flutter

2 个回答

  1. Best Answer

    有一个名为drop_cap_text的旧软件包可以满足您的需求，允许您将文本环绕在图像周围。但是，它尚未更新以兼容较新版本的 Flutter。幸运的是，您可以使用此软件包的分支，直到更改合并到原始软件包中。

    为此，请将以下内容添加到您的pubspec.yaml文件中以包含更新的包：

    dependencies:
  drop_cap_text:
    git:
      url: [email protected]:parlough/drop_cap_text.git
      ref: feat/adapt-for-deprecations

    此后，您可以像这样使用该包：

    DropCapText(
  'loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum loreum ipsum',
  dropCapPadding: const EdgeInsets.only(right: 8, bottom: 8), // Padding between the text and the image
  dropCap: DropCap(
    width: 200, // Set the width of the image
    height: 200, // Set the height of the image
    child: Image.network('https://picsum.photos/250?image=9'),
  ),
)

    示例代码输出

    • 1

  2. 堆叠小部件允许您将小部件叠加在一起。通过策略性地定位文本和图像，您可以创建文本环绕图像的布局。

    使用 Positioned 小部件将图像放置在 Stack 内，然后向文本添加填充以确保它环绕图像。

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Text Wrap Around Image')),
        body: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            children: [
              Stack(
                children: [
                  Container(
                    padding: const EdgeInsets.only(left: 210.0),
                    child: Text(
                      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '
                      'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. '
                      'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
                      style: TextStyle(fontSize: 18),
                    ),
                  ),
                  Positioned(
                    left: 0,
                    child: Image.network(
                      'https://picsum.photos/100?image=9',
                      width: 200,
                      height: 200,
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

    我希望这可以解决你的问题，

    • -1

相关问题