Ich versuche, ein Hintergrundbild für die Startseite festzulegen. Ich erhalte den Bildplatz vom Anfang des Bildschirms und fülle die Breite, aber nicht die Höhe. Vermisse ich etwas in meinem Code? Gibt es Bildstandards für Flattern? Skalieren Bilder basierend auf der Bildschirmauflösung jedes Telefons?
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")
]
)
)
);
}
}
Antworten:
Ich bin nicht sicher, ob ich Ihre Frage verstehe, aber wenn Sie möchten, dass das Bild den gesamten Bildschirm ausfüllt, können Sie ein
DecorationImage
mit einer Anpassung von verwendenBoxFit.cover
.Für Ihre zweite Frage finden Sie hier einen Link zur Dokumentation zum Einbetten von auflösungsabhängigen Asset-Bildern in Ihre App.
quelle
constraints: BoxConstraints.expand()
DecorationImage(image: Image.network("http://example.com/image.jpg").image, ...)
width: double.infinity
zum Container mit dem Bild hinzufügen .Wenn Sie a
Container
als Hauptteil des verwendenScaffold
, entspricht seine Größe dementsprechend der Größe des untergeordneten Elements. In der Regel ist dies nicht das, was Sie möchten, wenn Sie versuchen, Ihrer App ein Hintergrundbild hinzuzufügen.Bei dieser anderen Frage schlug @ collin-jackson auch vor,
Stack
stattContainer
als Körper des zu verwenden,Scaffold
und es macht definitiv das, was Sie erreichen wollen.So sieht mein Code aus
quelle
Sie können verwenden
DecoratedBox
.Ausgabe:
quelle
Sie können verwenden
Stack
, um das Bild auf den Vollbildmodus auszudehnen.Hinweis: Wenn
Scaffold
Sie a verwenden , können Sie dasStack
Innere je nach Bedarf optionalScaffold
mit oder ohneAppBar
einbauen.quelle
ShaderMask
, daher würde es nicht funktionieren, einenimage:
Namen einzugeben .Ich konnte einen Hintergrund unterhalb des
Scaffold
(und sogar desAppBar
) Hintergrunds anwenden, indem ich dasScaffold
unter aStack
und aContainer
in die erste "Ebene" mit dem Hintergrundbildsatz und derfit: BoxFit.cover
Eigenschaft setzte.Sowohl das
Scaffold
als auchAppBar
mussbackgroundColor
gesetzt sein alsColor.transparent
und daselevation
vonAppBar
muss 0 (Null) sein.Voilà! Jetzt haben Sie einen schönen Hintergrund unter dem gesamten Gerüst und der AppBar! :) :)
quelle
Wir können Container verwenden und seine Höhe als unendlich markieren
Ausgabe:
quelle
Dies funktioniert auch in einem Container.
quelle
Körper: Behälter (
);
quelle
Verwenden Sie diesen Code, um ein Hintergrundbild festzulegen, ohne es nach dem Hinzufügen des untergeordneten Elements zu verkleinern.
quelle