1. ホーム
  2. flutter

Flutterはネガティブマージンに対応していますか?

2023-10-03 23:17:25

質問

マイナスマージンは一般的には必要ありませんが、本当に便利な状況もあります。例えば なぜネガティブマージンを使うのか?

とりあえず、コンテナのmarginに負の値を設定すると、以下のようなエラーが発生しました。

I/flutter ( 3173): 'package:flutter/src/widgets/container.dart': Failed assertion: line 251: 'margin == null ||
I/flutter ( 3173): margin.isNonNegative': is not true.

どのように解決するのですか?

この質問に答えるには、まず、quot;負のマージン、または一般的にquot;マージンとは何かを定義する必要があります。CSS では、マージンはさまざまなレイアウト モデルでさまざまな意味を持っていますが、最も一般的には、ブロック レイアウト モデルが後続の子を配置するために使用するオフセットを計算するために寄与するいくつかの値の 1 つです。この場合、負の合計マージンは単に、次の子が前の子の後ではなく、その下の上に配置されることを意味するだけです。

Flutterでは、CSSと同様に、いくつかのレイアウトモデルがあります。しかし、CSSのブロックレイアウトモデル(マージンの折りたたみ、負のマージン、フロートのスキップなどをサポート)に相当するウィジェットは、今のところ存在しません。そのようなレイアウトモデルは確かに実装される可能性がありますが、少なくともフレームワーク自体にはまだ実装されていないだけなのです。

このようなレイアウト モデルを実装するには、RenderFlex または RenderListBody に似た RenderBox の子孫を作成し、おそらく Flex の子がその flex を設定できるのと同じように、ParentDataWidget を使用して各子供のマージンを設定する方法を提供します。

このような新しいレイアウト モデルを設計する際に最も複雑な部分は、この新しいレイアウト レンダー オブジェクトに渡された制約に適合するには、子プロセスが大きすぎるか小さすぎる場合に、オーバーフローまたはアンダーフローをどのように処理するかを決定することでしょう。RenderFlex レンダー オブジェクトには、子プロセスがアンダーフローする場合にスペースを分配する方法があり、オーバーフローする場合はエラーと見なされます(デバッグ モードでは、黄色と黒のストライプの警告領域とコンソールに記録されるメッセージで表示されます)。 でなければならない これは、基本的にこのレイアウト モデルをリストの内部でのみ使用できることを意味します (これが名前の由来です)。

新しいレイアウトモデルを書くことが魅力的でないのであれば、オーバーラップする子を許容する既存のレイアウトウィジェットのうちの1つを使うことができます。スタックは明白な選択で、各子供の明示的な位置を設定し、それらは任意に重なり合うことができます (これは CSS の絶対位置レイアウトモデルに漠然と似ています)。もうひとつの選択肢は、CustomMultiChildLayoutウィジェットで、各子供を順番にレイアウトして配置することができます。これを使用すると、各子供を次々に配置し、後続の子の位置を前の子のサイズと位置から得られる値に設定することでネガティブ マージンをシミュレートすることができます。

ブロックのようなレイアウトモデルに関心があれば、私たちは確かにそれを実装できます (バグを報告し、実装してほしいモデルを記述するか、または自分で実装してレビューのためにプルリクエストを送信してください)。これまでのところ、私たちは、それが実際にそれほど有用であることを見出していません。