如何调整Flutter图像的宽度?

relj7zay  于 2023-03-24  发布在  Flutter
关注(0)|答案(3)|浏览(171)

您好!图像的宽度与手机屏幕的宽度相同。有什么问题吗?我如何缩小宽度的大小?谢谢!

class _SignupProfileImageState extends State<SignupProfileImage> {
  bool isUploadImage = false;
  var selectedImage;

  @override
  Widget build(BuildContext context) {
    return Positioned(
        top: 140,
        right: 0,
        left: 0,
        child: SizedBox(
          height: 100,
          width: 100,
          child: Stack(
            clipBehavior: Clip.none,
            fit: StackFit.expand,
            children: [
              Container(
      width: 50,
      child: ClipOval(
        child: Image.asset(
          'assets/face.jpg',
          height: 50.0,
          width: 50.0,
          fit: BoxFit.fill              
            ],
          ),
        )
    );
  }
}
vngu2lb8

vngu2lb81#

您可以使用CircleAvatar代替ClipOval,如下图所示,这将是一个更好的选择。
CircleAvatar class you can check

Container(
  width: 50,
  child: CircleAvatar(
    backgroundColor: Colors.transparent,
    radius: 90.0,
    child: Image.asset(
      "assets/face.jpg",
      height: 50.0,
      width: 50.0,
      fit: BoxFit.fill
    ),
  )
)
bweufnob

bweufnob2#

您可以使用下面的代码:

class SignupProfileImage extends StatefulWidget {
  const SignupProfileImage({Key? key}) : super(key: key);

  @override
  State<SignupProfileImage> createState() => _SignupProfileImageState();
}

class _SignupProfileImageState extends State<SignupProfileImage> {
  bool isUploadImage = false;

  @override
  Widget build(BuildContext context) => Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          SizedBox(
            height: 100,
            width: 100,
            child: ClipOval(
              child: Image.asset(
                'assets/face.png',
                fit: BoxFit.fill,
              ),
            ),
          ),
        ],
      );
}

您也可以通过GitHub访问完整的源代码。
如果您还有其他问题,请不要犹豫,写在评论。

r7s23pms

r7s23pms3#

用中心线包裹你的尺寸框。它会在中心线显示你的图片

return Positioned(
        top: 140,
        right: 0,
        left: 0,
        child: Center( //TODO: Wrap SizedBox with Center
          child: SizedBox(
            height: 100,
            width: 100,
            child: Stack(
              clipBehavior: Clip.none,
              fit: StackFit.expand,
              children: [
                Container(
      width: 50,
      child: ClipOval(
          child: Image.asset(
            'assets/face.jpg',
            height: 50.0,
            width: 50.0,
            fit: BoxFit.fill              
              ],
            ),
          ),
        )
    );

相关问题