Flutter SDK Ustaw obraz tła


122

Próbuję ustawić obraz tła dla strony głównej. Otrzymuję miejsce obrazu od początku ekranu i wypełniam szerokość, ale nie wysokość. Czy coś mi brakuje w kodzie? Czy istnieją standardy obrazu dla trzepotania? Czy obrazy skalują się na podstawie rozdzielczości ekranu każdego telefonu?

class BaseLayout extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return new Scaffold(
      body: new Container(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            new Image.asset("assets/images/bulb.jpg") 
          ]
        )
      )
    );
  }
}

jaki powinien być rozmiar obrazu? szerokość wysokość?
ArgaPK

Czy ktoś może podać przykład z połączeniem sieciowym
The Dead Guy,

1
@TheDeadGuy Image.network („ example.com/path/to/image.jpg” )?
SacWebDeveloper

rozwiązanie do kasy tutaj, pod tym linkiem stackoverflow.com/a/62245570/9955978
Shubham Sharma

Żaden z wymienionych komentarzy nie pomógł w moim przypadku - proszę nie pytać dlaczego. Oto przydatny link z objaśnieniami: education.app/flutter/…
boldnik

Odpowiedzi:


333

Nie jestem pewien, czy rozumiem Twoje pytanie, ale jeśli chcesz, aby obraz wypełnił cały ekran, możesz użyć DecorationImagedopasowania BoxFit.cover.

class BaseLayout extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/images/bulb.jpg"),
            fit: BoxFit.cover,
          ),
        ),
        child: null /* add child content here */,
      ),
    );
  }
}

Drugie pytanie to łącze do dokumentacji dotyczącej osadzania w aplikacji obrazów zasobów zależnych od rozdzielczości.


8
Działa to tak długo, jak nie masz dziecka. Jeśli dodasz dziecko, rozmiar kontenera zostanie zmniejszony do rozmiaru jego elementu podrzędnego. Czy wiesz, jak sprawić, by pojemnik wypełniał cały ekran bez względu na wielkość jego dziecka?
HyLian,

@ColinJackson jaki powinien być rozmiar obrazu? szerokość wysokość?
ArgaPK

4
@HyLian ustawia właściwość ograniczeń kontenera,constraints: BoxConstraints.expand()
Rustem Kakimov

2
Do obrazu sieciowego można wykorzystaćDecorationImage(image: Image.network("http://example.com/image.jpg").image, ...)
Eugene Gr. Philippov

@HyLian dodaj width: double.infinitydo kontenera z obrazem.
jkoech

46

Jeśli użyjesz a Containerjako treści elementu Scaffold, jego rozmiar będzie odpowiadał rozmiarowi jego dziecka i zwykle nie jest to tym, czego chcesz, próbując dodać obraz tła do swojej aplikacji.

Patrząc na to drugie pytanie, @ collin-jackson również sugerował, aby użyć go Stackzamiast Containerciała Scaffoldi zdecydowanie robi to, co chcesz osiągnąć.

Tak wygląda mój kod

@override
Widget build(BuildContext context) {
  return new Scaffold(
    body: new Stack(
      children: <Widget>[
        new Container(
          decoration: new BoxDecoration(
            image: new DecorationImage(image: new AssetImage("images/background.jpg"), fit: BoxFit.cover,),
          ),
        ),
        new Center(
          child: new Text("Hello background"),
        )
      ],
    )
  );
}

jaki powinien być rozmiar obrazu? szerokość wysokość?
ArgaPK

5
Otwarcie klawiatury zmienia rozmiar obrazu. Co można na to zrobić?
Michael Hathi

15

Możesz użyć DecoratedBox.

@override
Widget build(BuildContext context) {
  return DecoratedBox(
    decoration: BoxDecoration(
      image: DecorationImage(image: AssetImage("your_asset"), fit: BoxFit.cover),
    ),
    child: Center(child: FlutterLogo(size: 300)),
  );
}

Wynik:

wprowadź opis obrazu tutaj


11

Możesz użyć, Stackaby rozciągnąć obraz na pełny ekran.

Stack(
        children: <Widget>
        [
          Positioned.fill(  //
            child: Image(
              image: AssetImage('assets/placeholder.png'),
              fit : BoxFit.fill,
           ),
          ), 
          ...... // other children widgets of Stack
          ..........
          .............
         ]
 );

Uwaga: Opcjonalnie, jeśli używasz a Scaffold, możesz włożyć Stackwnętrze Scaffoldz lub bez, w AppBarzależności od potrzeb.


Dokładnie to, czego potrzebowałem, w moim przypadku mój obraz znajduje się wewnątrz a ShaderMask, dlatego nie zadziałałoby umieszczanie image:nazwy.
Wkrótce Santos

5

Udało mi się zastosować tło poniżej Scaffold(a nawet to AppBar), umieszczając Scaffoldpod a Stacki ustawiając a Containerw pierwszej „warstwie” z ustawionym obrazem tła i fit: BoxFit.coverwłaściwością.

Zarówno Scaffoldi, jak i AppBarmuszą mieć backgroundColorustawione jako Color.transparenti elevationof AppBarmuszą wynosić 0 (zero).

Voilà! Teraz masz ładne tło pod całym rusztowaniem i AppBarem! :)

import 'package:flutter/material.dart';
import 'package:mynamespace/ui/shared/colors.dart';
import 'package:mynamespace/ui/shared/textstyle.dart';
import 'package:mynamespace/ui/shared/ui_helpers.dart';
import 'package:mynamespace/ui/widgets/custom_text_form_field_widget.dart';

class SignUpView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack( // <-- STACK AS THE SCAFFOLD PARENT
      children: [
        Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/images/bg.png"), // <-- BACKGROUND IMAGE
              fit: BoxFit.cover,
            ),
          ),
        ),
        Scaffold(
          backgroundColor: Colors.transparent, // <-- SCAFFOLD WITH TRANSPARENT BG
          appBar: AppBar(
            title: Text('NEW USER'),
            backgroundColor: Colors.transparent, // <-- APPBAR WITH TRANSPARENT BG
            elevation: 0, // <-- ELEVATION ZEROED
          ),
          body: Padding(
            padding: EdgeInsets.all(spaceXS),
            child: Column(
              children: [
                CustomTextFormFieldWidget(labelText: 'Email', hintText: 'Type your Email'),
                UIHelper.verticalSpaceSM,
                SizedBox(
                  width: double.maxFinite,
                  child: RaisedButton(
                    color: regularCyan,
                    child: Text('Finish Registration', style: TextStyle(color: white)),
                    onPressed: () => {},
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

3

Możemy użyć kontenera i oznaczyć jego wysokość jako nieskończoność

body: Container(
      height: double.infinity,
      width: double.infinity,
      child: FittedBox(
        fit: BoxFit.cover,
        child: Image.network(
          'https://cdn.pixabay.com/photo/2016/10/02/22/17/red-t-shirt-1710578_1280.jpg',
        ),
      ),
    ));

Wynik:

wprowadź opis obrazu tutaj


2
decoration: BoxDecoration(
      image: DecorationImage(
        image: ExactAssetImage("images/background.png"),
        fit: BoxFit.cover
      ),
    ),

działa to również wewnątrz pojemnika.


-1

Aby ustawić obraz tła bez zmniejszania po dodaniu dziecka, użyj tego kodu.

  body: Container(
    constraints: BoxConstraints.expand(),
      decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage("assets/aaa.jpg"),
        fit: BoxFit.cover,
        )
      ),

    //You can use any widget
    child: Column(
      children: <Widget>[],
    ),
    ),

-1
body: Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage('images/background.png'),fit:BoxFit.cover
      )
    ),
);

Podana odpowiedź została oznaczona do sprawdzenia jako post niskiej jakości. Oto kilka wskazówek, jak napisać dobrą odpowiedź? . Ta udzielona odpowiedź mogłaby zyskać na wyjaśnieniu. Odpowiedzi zawierające tylko kod nie są uważane za „dobre” odpowiedzi.
Trenton McKinney
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.