Flutter 图片即使设置了fit: BoxFit.cover不满屏的坑

在轮播图的时候由于要加一个立即体验的按钮,所以使用了Stack下面包含Container和Align,如

发现即使Image.asset中设置了fit: BoxFit.cover,一直不满屏,

最后在倒腾了好久后发现还需要在Image.asset增加

width: double.infinity,
height: double.infinity

这两个属性才可以满屏显示。

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
这是我的全部flutter代码,你看下为什么字体没有根据textStyle而改变大小:import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); // This widget is the root of your application. @override Widget build(BuildContext context) { return ScreenUtilInit( designSize: const Size(240, 320), minTextAdapt: true, splitScreenMode: true, builder: (context, child) { return myApp(); }, ); } } class myApp extends StatelessWidget { const myApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'ListView widget', theme: ThemeData( textTheme: TextTheme( bodyLarge: TextStyle(fontSize: 50), )), home: Scaffold( body: Container( color: Colors.white, child: SafeArea( child: Column( children: [ Image.asset( 'lib/images/title.png', width: ScreenUtil().setWidth(240), fit: BoxFit.contain, ), Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ Image.asset( 'lib/images/aside.png', width: 30, height: ScreenUtil().setWidth(288), fit: BoxFit.cover, alignment: Alignment.topLeft, ), Expanded(flex: 1, child: middleContainer()), Image.asset( 'lib/images/aside.png', width: 30, height: ScreenUtil().setWidth(288), fit: BoxFit.cover, alignment: Alignment.topRight, ), ], ) ], ), ))), ); } } class middleContainer extends StatelessWidget { const middleContainer({super.key}); @override Widget build(BuildContext context) { return Container( height: ScreenUtil().setWidth(288), color: const Color(0xff010042), child: Column(children: [ Expanded( flex: 274, child: Container( color: Colors.amber, )), Expanded( flex: 45, child: Container( color: Color.fromARGB(255, 209, 188, 123), )), Expanded( flex: 60, child: Container( child: Stack( children: [ Positioned( child: Text( '返回', ), bottom: ScreenUtil().setWidth(5), left: ScreenUtil().setWidth(10), ) ], ), color: Color.fromARGB(255, 85, 105, 104), )), ]), ); } }
05-25

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值