如何在扑动中设置背景图像?

我正在为主页设置背景图片。我正在从屏幕开始获取图像位置，并填充宽度而不是高度。我在代码中遗漏了什么吗?颤振有图像标准吗?图片的大小是基于每部手机的屏幕分辨率吗?

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

当前回答

其他答案都很棒。这是另一种方法。

这里我使用sizebox .expand()来填充可用空间，并将严格的约束传递给它的子代(Container)。 BoxFit。cover enum缩放图像并覆盖整个屏幕

 Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox.expand( // -> 01
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
              fit: BoxFit.cover,    // -> 02
            ),
          ),
        ),
      ),
    );
  }

2021-02-26 07:30:24

其他回答

截图:

代码:

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

2019-02-05 14:19:15

    @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SingleChildScrollView(
            child: Container(
      decoration: const BoxDecoration(
        image: DecorationImage(
            image: AssetImage('assets/bgmain.jpg'),
            //fit: BoxFit.cover 
            fit: BoxFit.fill),
      ),
      child: Column(
        children: 
        [
          //
        ],
      ),
    )));
  }

2021-12-08 04:28:05

以下是实现这一目标的方法。第一个例子是资产映像，第二个例子是网络映像。

当地的形象:

Container(
  height: 200,
  width: double.infinity,
  decoration: const BoxDecoration(
    image: DecorationImage(
        image: AssetImage("assets/images/cat2.jpg"), 
        fit: BoxFit.cover),
  ),
  child: 
)

网络图片:

Container(
  height: 200,
  width: double.infinity,
  decoration: const BoxDecoration(
    image: DecorationImage(
        image: NetworkImage("https://picsum.photos/id/237/200/300"), 
        fit: BoxFit.cover),
  ),
  child:
)

2022-10-01 09:52:44

我们可以使用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',
        ),
      ),
    ));

输出:

2020-05-13 14:15:44

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

2020-06-25 01:22:15

如何在扑动中设置背景图像?

推荐文章

最新文章

标签