是什么原因导致Flutter平台之间的图像宽度/覆盖率差异?

问题描述 投票:0回答:1

我正在当前项目中使用Tinder式卡片系统,并且在本地android设备上看起来还不错。但是,当我在iOS模拟器上运行时,即使您将其宽度设置为MediaQuery宽度(如您在下面的代码中看到的那样),“卡片”小部件中的图像也最终无法填充视图。

有人知道解决方案吗,还是这只是我必须处理的跨平台问题?

图像:Android viewiOS view

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: () {}),
                ],
              )
            ]
          ),
        ),
      ),
    );
  }
}
image flutter dart mobile flutter-layout
1个回答
0
投票

我认为只是设备屏幕比例的差异(宽度高度比例)

您的android设备屏幕与iOS设备屏幕不同。

卡片和图像小部件在两个设备中都保持比例。

验证两个模拟器中的屏幕宽度和高度。

对我很好。没有跨平台问题。

© www.soinside.com 2019 - 2024. All rights reserved.