Flutterはネガティブマージンに対応していますか?
質問
マイナスマージンは一般的には必要ありませんが、本当に便利な状況もあります。例えば なぜネガティブマージンを使うのか?
とりあえず、コンテナの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ウィジェットで、各子供を順番にレイアウトして配置することができます。これを使用すると、各子供を次々に配置し、後続の子の位置を前の子のサイズと位置から得られる値に設定することでネガティブ マージンをシミュレートすることができます。
ブロックのようなレイアウトモデルに関心があれば、私たちは確かにそれを実装できます (バグを報告し、実装してほしいモデルを記述するか、または自分で実装してレビューのためにプルリクエストを送信してください)。これまでのところ、私たちは、それが実際にそれほど有用であることを見出していません。
関連
-
[解決済み] FlutterのコードからWebブラウザ(URL)を開くには?
-
[解決済み] Flutter: タッチスクリーンでのスクロールを無効にするListView
-
[解決済み] Flutterアプリがウェブ上で動作しているかどうかを検出するには?
-
[解決済み] FlutterのshrinkWrapプロパティは何をするのですか?
-
[解決済み] コンテナウィジェットが親を縦に埋めるようにする
-
[解決済み] Row FlutterでElement間のスペースを設定する
-
[解決済み] Flutter - Container onPressed?
-
[解決済み] FlutterのScaffold AppBarからドロップシャドウを削除する?
-
[解決済み] Flutter Layout Row / Column - 幅を共有し、高さを拡張する
-
[解決済み] Flutterでテキストに線を引くには?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Flutterで次のTextFieldにフォーカスを移すには?
-
[解決済み] FlutterでAndroidのStatusBarを非表示にする方法
-
[解決済み] 丸みを帯びたボーダーを持つボタンを作成する [重複]。
-
[解決済み] Flutterアプリがウェブ上で動作しているかどうかを検出するには?
-
[解決済み] TextFormFieldとTextFieldの違いは何ですか?
-
[解決済み] FlutterのshrinkWrapプロパティは何をするのですか?
-
[解決済み] Row FlutterでElement間のスペースを設定する
-
[解決済み] 親のサイズに基づいてウィジェットをレイアウトするには?
-
[解決済み] Dartのパラメータは、その型のために'null'という値を持つことができません。
-
Flutterのpubspec.yamlの依存関係のバージョン番号の前にあるキャレット記号(^)は何でしょうか?