Flutter SDK Set ภาพพื้นหลัง

ฉันกำลังพยายามตั้งค่าภาพพื้นหลังสำหรับโฮมเพจ ฉันได้รับตำแหน่งของภาพตั้งแต่เริ่มต้นหน้าจอและกรอกความกว้าง แต่ไม่ใช่ความสูง รหัสของฉันหายไปหรือเปล่า มีมาตรฐานภาพสำหรับการกระพือปีกหรือไม่? ภาพปรับขนาดตามความละเอียดหน้าจอของโทรศัพท์แต่ละเครื่องหรือไม่

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") 
          ]
        )
      )
    );
  }
}

ผมไม่แน่ใจว่าผมเข้าใจคำถามของคุณ แต่ถ้าคุณต้องการภาพให้เต็มหน้าจอทั้งหมดที่คุณสามารถใช้กับความเหมาะสมของDecorationImageBoxFit.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 */,
      ),
    );
  }
}

สำหรับคำถามที่สองของคุณนี่คือลิงก์ไปยังเอกสารเกี่ยวกับวิธีฝังรูปภาพเนื้อหาที่ขึ้นกับความละเอียดลงในแอป

หากคุณใช้ a Containerเป็นร่างกายScaffoldขนาดของมันจะเป็นไปตามขนาดของเด็กและโดยปกติแล้วจะไม่ใช่สิ่งที่คุณต้องการเมื่อคุณพยายามเพิ่มภาพพื้นหลังให้กับแอปของคุณ

เมื่อมองไปที่คำถามอื่น ๆ นี้ @ collin-jackson ก็แนะนำให้ใช้Stackแทนที่จะContainerเป็นตัวของScaffoldและแน่นอนว่าจะทำในสิ่งที่คุณต้องการบรรลุ

นี่คือลักษณะของรหัสของฉัน

@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"),
        )
      ],
    )
  );
}

คุณสามารถใช้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)),
  );
}

เอาท์พุต:

คุณสามารถใช้Stackเพื่อทำให้ภาพยืดเต็มหน้าจอ

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

หมายเหตุ: อีกทางเลือกหนึ่งหากใช้ a Scaffoldคุณสามารถใส่Stackด้านในScaffoldโดยมีหรือไม่ก็ได้AppBarตามความต้องการของคุณ

ฉันสามารถใช้พื้นหลังด้านล่างScaffold(และแม้กระทั่งมันAppBar) ได้โดยใส่ด้านScaffoldล่างStackและตั้งค่าContainerใน "เลเยอร์" แรกด้วยชุดภาพพื้นหลังและfit: BoxFit.coverคุณสมบัติ

ทั้งScaffoldและAppBarต้องมีการbackgroundColorตั้งค่าเป็นColor.transparentและelevationของAppBarจะต้องเป็น 0 (ศูนย์)

โวล่า! ตอนนี้คุณมีพื้นหลังที่สวยงามด้านล่างทั้ง Scaffold และ AppBar! :)

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: () => {},
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

เราสามารถใช้ Container และทำเครื่องหมายความสูงเป็นอินฟินิตี้

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',
        ),
      ),
    ));

เอาท์พุต:

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

นอกจากนี้ยังใช้งานได้ภายในคอนเทนเนอร์

ในการตั้งค่าภาพพื้นหลังโดยไม่ลดขนาดหลังจากเพิ่มลูกให้ใช้รหัสนี้

  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>[],
    ),
    ),

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