颤动：将图像填充到身体上方

问题描述

我正在做一个扑朔迷离的项目。我已经加载了图像，并且希望它充满整个身体。阅读文档后，我想到了这一点：

void main() => runApp(MaterialApp(
  home : Scaffold(
      appBar: AppBar(
        title: Center(
           child: Text("I am rich"),),backgroundColor: Colors.AmberAccent,backgroundColor: Colors.purple,body: Image(
        fit: BoxFit.cover,image: NetworkImage('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWqFc0Y7fRegMPpHoqNmD-hdba-3Zk_ttQQw&usqp=CAU'),)
  )
);

但是它似乎不起作用。请帮忙

解决方法

您可以在下面复制粘贴运行完整代码
您可以将width和height分别设置为window.physicalSize.width和window.physicalSize.height
而且您可以使用BoxFit.fill，请参见

下的效果

Image(
    fit: BoxFit.fill,width: window.physicalSize.width,height: window.physicalSize.height,

工作演示

完整代码

import 'dart:ui';

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Center(
          child: Text("I am rich"),),backgroundColor: Colors.amberAccent,backgroundColor: Colors.purple,body: Image(
        fit: BoxFit.fill,image: NetworkImage(
            'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWqFc0Y7fRegMPpHoqNmD-hdba-3Zk_ttQQw&usqp=CAU'),)));

,

为此使用MediaQuery，它将根据手机的屏幕尺寸设置图像

body: Center(
        child: Image.network(
          'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWqFc0Y7fRegMPpHoqNmD- hdba-          3Zk_ttQQw&usqp=CAU',width: MediaQuery.of(context).size.width,height: MediaQuery.of(context).size.height,fit: BoxFit.fill,

,

您可以使用Image.network代替Image小部件，如official document中所述。或者，您可以向图像添加height属性。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var title = 'Web Images';

    return MaterialApp(
      title: title,home: Scaffold(
        appBar: AppBar(
          title: Text(title),body: Image(
        height: double.infinity,fit: BoxFit.cover,image: NetworkImage(
          'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWqFc0Y7fRegMPpHoqNmD-hdba-3Zk_ttQQw&usqp=CAU',);
  }
}