web-dev-qa-db-ja.com

Flutterで背景全体（高さ100％x幅100％）に合うように画像を拡大するにはどうすればよいですか？

デバイスの画面の縦横比と一致しない画像があります。画面全体に画像が収まるように画像を引き伸ばしたいのですが、画像の一部をトリミングしたくありません。

CSSにはパーセンテージの概念があるため、高さと幅を100％に設定することができました。しかし、Flutterがそのコンセプトを持っているとは思えないので、高さと幅をハードコードするだけでは良くないので、私は立ち往生しています。

ここに私が持っているものがあります（画像の前景に何かがあるのでStackを使用しています）。

Widget background = new Container(
  height: // Not sure what to put here!
  width: // Not sure what to put here!
  child: new Image.asset(
    asset.background,
    fit: BoxFit.fill, // I thought this would fill up my Container but it doesn't
  ),
);

return new Stack(
  children: <Widget>[
    background,
    foreground,
  ],
);
imagecontainersflutterstretch
17
Mary

Imageをその親を満たすようにするには、単にそれをFittedBoxにラップします：

FittedBox(
  child: Image.assert('foo.png'),
  fit: BoxFit.fill,
)

FittedBoxは、スペースを埋めるように画像を引き伸ばします。 （この機能はかつてBoxFit.fill、ただしAPIは変更され、BoxFitはこの機能を提供しなくなりました。 FittedBoxはドロップイン置換として機能するはずです。コンストラクタの引数を変更する必要はありません。

あるいは、複雑な装飾の場合、Containerの代わりにImageを使用し、decoration/foregroundDecorationフィールドを使用できます。

Containerを親にするには、次のいずれかを行う必要があります。

  • 子供がいない
  • alignmentプロパティではなくnullプロパティを持っている

以下は、2つの画像と1つのTextを1つのContainerに組み合わせて、親の幅と高さを100％にした例です。

enter image description here

Container(
  foregroundDecoration: const BoxDecoration(
    image: DecorationImage(
        image: NetworkImage(
            'https://p6.storage.canalblog.com/69/50/922142/85510911_o.png'),
        fit: BoxFit.fill),
  ),
  decoration: const BoxDecoration(
    image: DecorationImage(
        alignment: Alignment(-.2, 0),
        image: NetworkImage(
            'http://www.naturerights.com/blog/wp-content/uploads/2017/12/Taranaki-NR-post-1170x550.png'),
        fit: BoxFit.cover),
  ),
  alignment: Alignment.bottomCenter,
  padding: EdgeInsets.only(bottom: 20),
  child: Text(
    "Hello World",
    style: Theme.of(context)
        .textTheme
        .display1
        .copyWith(color: Colors.white),
  ),
),
25
Rémi Rousselet

以下は、高さが一定である間、画像をコンテナの幅の100％に合わせます。ローカルアセットの場合は、 AssetImage を使用します

Container(
  width: MediaQuery.of(context).size.width,
  height: 100,
  decoration: BoxDecoration(
    image: DecorationImage(
      fit: BoxFit.fill,
      image: NetworkImage("https://picsum.photos/250?image=9"),
    ),
  ),
)

画像塗りつぶしモード：

  • Fill-画像は引き伸ばされます

    fit: BoxFit.fill

    enter image description here

  • Fit Height-画像の全高が表示されていることを確認しながら、画像を比例させます（オーバーフローする可能性があります）

    fit: BoxFit.fitHeight

    enter image description here

  • 幅に合わせる-画像の幅全体が表示されていることを確認しながら、画像を比例させます（オーバーフローする可能性があります）

    fit: BoxFit.fitWidth

    enter image description here

  • Cover-画像は比例して維持され、コンテナの最大カバレッジを保証します（オーバーフローする可能性があります）

    fit: BoxFit.cover

    enter image description here

  • Contain-画像全体を表示する必要がある場合、画像は比例して維持され、可能な限り最小限に抑えられます。

    fit: BoxFit.contain

    enter image description here

18
Jossef Harush

Stack内で、backgroundウィジェットを Positioned.fill でラップする必要があります。

return new Stack(
  children: <Widget>[
    new Positioned.fill(
      child: background,
    ),
    foreground,
  ],
);
13
Mary

私はあなたの目的のために Flex はContainer（）よりもうまくいくと思う：

new Flex(
    direction: Axis.vertical,
    children: <Widget>[
      Image.asset(asset.background)
    ],
   )
2
M_Lude

塗りつぶしには、時々SizedBox.expandを使用します

0
KnightsForce

contentPaddingを設定してみてください

ListTile(
  contentPadding: EdgeInsets.all(0.0),
  ...
)
0
Gomolemo

質問には最初のステップが含まれていますが、幅と高さが必要です。画面の幅と高さを取得できます。ここに小さな編集があります

//gets the screen width and height
double Width = MediaQuery.of(context).size.width;
double Height = MediaQuery.of(context).size.height;

Widget background = new Image.asset(
  asset.background,
  fit: BoxFit.fill,
  width: Width,
  height: Height,
);

return new Stack(
  children: <Widget>[
    background,
    foreground,
  ],
);

幅と高さを使用して、画面サイズに基づいて他のオブジェクトのサイズを変更することもできます。

例：width: Height/2, height: Height/2 //using height for both keeps aspect ratio

0
SwiftNinjaPro