如何解决颤动:将图像填充到身体上方
我正在做一个扑朔迷离的项目。我已经加载了图像,并且希望它充满整个身体。阅读文档后,我想到了这一点:
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',);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。