web-dev-qa-db-ja.com

Flutterのインライン画像を含むテキスト

左揃えまたは右揃えの画像と、画像を囲むテキストを使用してレイアウトを作成しようとしています。 Flutterでこの種のレイアウトを構築することは可能ですか？

これは私が作成しようとしているレイアウトです：

example

flutterflutter-layout
15
Dan

私は パッケージ：drop_cap_text を公開してDropCapTextを実現しました。また、カスタムDropCapとして画像を挿入することもできます。結果は以下のとおりです。

enter image description here

DropCapText(
  loremIpsumText,
  dropCap: DropCap(
  width: 100,
  height: 100,
  child: Image.network(
    'https://www.codemate.com/wp-content/uploads/2017/09/flutter-logo.png')
  ),
),
1
Tiziano Munegato

@Tizianoは特定の場合に機能します。複雑なインライン画像を使用するより一般的なケースについては、今のところ、インラインHTMLWebビューとstyle="float: left"HTML属性を使用する以外の方法を見ることができます。この機能のPRを作成しています（HTML文字列をロードするWebビュー） https://github.com/flutter/plugins/pull/1312

const WebView(
              htmlString: """
<u><em><strong>You can do HTML too!</strong></em></u><br />
<img src="https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png" style="float: left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<img src="https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png" style="float: right"> 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              """,
            ),

enter image description here

1
TruongSinh

Containerを作成し、テキストの形で ClipPath でクリップできます。その後、すべてをまとめるには、このContainerとImageの両方をStackに追加します。

Widget build(BuildContext context) {
    return Stack(
        children: [
            _buildImageWidget(),
            ClipPath(
                clipper: MyCustomClipper(),
                child: _buildTextWidget(),
            ),
        ],
    );
}

また、カスタムCustomClipperでは、画像が占める部分をカットするだけで、Flutterはその部分に子ウィジェットをレンダリングしないようにします。

0
tudorprodan

残念ながら、今のところ、この種のテキストの折り返しはFlutterではサポートされていません。画像の前にテキストを折り返すことはできますが、下に折り返すことはできません。

0
Taha Ali