Flutter-如何控制抽屉中的个人资料图片大小

Question

我想控制个人资料图像的大小，并使其变圆而不是如下所示的椭圆形。

更改高度和/或宽度值既不会影响大小也不影响比率，而且很奇怪的是，当我更改margin参数时，它会更改椭圆形半径。

new UserAccountsDrawerHeader(
  decoration: BoxDecoration(color: Colors.white),
  currentAccountPicture: new Container(
    margin: const EdgeInsets.only(bottom: 40.0),
    width: 10.0,
    height: 10.0,
    decoration: new BoxDecoration(
      shape: BoxShape.circle,
      image: new DecorationImage(
        fit: BoxFit.fill,
        image: new NetworkImage(
          "https://example.com/assets/images/john-doe.jpg",
        ),
      ),
    ),
  ),
  accountName: new Container(
    ...
  ),
  accountEmail: new Container(
    ...
  ),
  onDetailsPressed: () {
    ...
  },
),

我在做什么错了？

更新：上面的方法是对CircleAvatar的一种变通方法，该变通方法没有对图像大小进行任何控制。如果您尝试通过可以控制图片大小的其他方式尝试CircleAvatar，请共享它以提供帮助。

Answer 1

将边距放置在图像的容器中，而必须使用UserAccountDrawerHeader的margin参数，这就是图像变为椭圆形的原因：

UserAccountsDrawerHeader(
          decoration: BoxDecoration(color: Colors.white),
            margin: EdgeInsets.only(bottom: 40.0),                                            
          currentAccountPicture: Container(  
            decoration: BoxDecoration(
                shape: BoxShape.circle,
                image: DecorationImage(
                    fit: BoxFit.fill,
                    image:
                        NetworkImage("https://via.placeholder.com/150"))),
          ),
          accountName: new Container(
              child: Text(
            'Name',
            style: TextStyle(color: Colors.black),
          )),
          accountEmail: new Container(
              child: Text(
            'Email',
            style: TextStyle(color: Colors.black),
          )),
        ),

Answer 2

将图片包装在CircleAvatar小部件中。它是为此目的而制成的。

Answer 3

将此代码用于网络映像：

                new CircleAvatar(
                      radius: 60.0,
                      backgroundColor: const Color(0xFF778899),
                      backgroundImage: NetworkImage("Your Photo Url"), // for Network image

                    ),

将其用于资产图片：

              new CircleAvatar(
                      radius: 60.0,
                      backgroundColor: const Color(0xFF778899),
                      child: new Image.asset(
                        'images/profile.png',
                      ), //For Image Asset

                    ),

Answer 4

如果将backgroundImage用作CircleAvatar的图像提供程序，则更改radius属性确实没有任何作用。从源circle_avatar.dart可以看出，该图像被渲染为BoxFit.cover DecorationImage(image: backgroundImage, fit: BoxFit.cover)-并且在user_accounts_drawer_header.dart中，currentAccountPicture被硬编码为72.0像素的SizedBox，因此图片的尺寸始终为72.0px。

https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/user_accounts_drawer_header.dart#L57

https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/circle_avatar.dart#L203

希望Flutter小组在将来对此有所控制。

不是答案，只是希望可以帮助某人的更多信息。

Answer 5

您可以创建自己的标题：

            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue
              ),
              child: ListView(
                children: [
                  return ClipRRect(
                    borderRadius: BorderRadius.circular(8.0),
                    child: Image.asset('images/myImage.jpg'),
                  ),
                  //These can go here or below the header with the same background color
                  Text("user name"),//customize this text
                  Text("useremail@example.com"),
                  //...additional header items here 
                ],
              )),

Answer 6

尝试一下：

import 'package:flutter/material.dart';

class AppDrawer extends StatefulWidget {
  @override
  _AppDrawerState createState() => new _AppDrawerState();
}

class _AppDrawerState extends State<AppDrawer> {
  @override
  Widget build(BuildContext context) {
    return new Drawer(
      child: Center(
        child: Column(
          children: <Widget>[
            new UserAccountsDrawerHeader(
              decoration: BoxDecoration(color: Colors.white),
              currentAccountPicture: new CircleAvatar(
                radius: 50.0,
                backgroundColor: const Color(0xFF778899),
                backgroundImage:
                    NetworkImage("http://tineye.com/images/widgets/mona.jpg"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这是输出的屏幕截图：

Answer 7

我找到了解决方案！至少那对我有用

    import 'package:flutter/material.dart';

    class HomePage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          // Side menu
          drawer: new Drawer(
            child: GestureDetector(
              onTap: () {},
              child: ListView(
                children: <Widget>[
                  new UserAccountsDrawerHeader(
                    accountName: new Text('Hymn +'),
                    accountEmail: new Text('johndoe@gmail.com'),
                    currentAccountPicture: new CircleAvatar(
                      backgroundImage: new NetworkImage(
                          'https://miro.medium.com/max/1400/1*uC0kYhn8zRx8Cfd0v0cYQg.jpeg'),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      }
    }