我正在当前项目中使用Tinder式卡片系统,并且在本地android设备上看起来还不错。但是,当我在iOS模拟器上运行时,即使您将其宽度设置为MediaQuery宽度(如您在下面的代码中看到的那样),“卡片”小部件中的图像也最终无法填充视图。
有人知道解决方案吗,还是这只是我必须处理的跨平台问题?
CODE:
class TinderCard extends StatelessWidget {
final User user;
const TinderCard({@required this.user});
@override
Widget build(BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30)//BorderRadius.vertical(top: Radius.circular(30))
),
elevation: 5,
child: curvedClipRect(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Image(image: NetworkImage(user.profileUrl), width: MediaQuery.of(context).size.width, alignment: Alignment.center,),
Padding(
padding: const EdgeInsets.only(left: 10, bottom: 7, right: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("${user.firstName} ${user.lastName}", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),),
Text("Height: ${user.height} in."),
Text(user.location),
]
),
),
Row(
children: <Widget>[
IconButton(icon: Icon(Icons.close), onPressed: () {}),
Spacer(),
IconButton(icon: Icon(Icons.check), onPressed: () {}),
],
)
]
),
),
),
);
}
}
我认为只是设备屏幕比例的差异(宽度高度比例)
您的android设备屏幕与iOS设备屏幕不同。
卡片和图像小部件在两个设备中都保持比例。
验证两个模拟器中的屏幕宽度和高度。
对我很好。没有跨平台问题。