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

时间:2018-12-23 20:15:24

标签: dart flutter flutter-layout

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

更改高度和/或宽度值既不会影响大小也不影响比率,而且很奇怪的是,当我更改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: () {
    ...
  },
),

enter image description here

我在做什么错了?

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

7 个答案:

答案 0 :(得分: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),
          )),
        ),

答案 1 :(得分:1)

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

答案 2 :(得分:1)

将此代码用于网络映像:

                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

                    ),

答案 3 :(得分:1)

如果将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小组在将来对此有所控制。

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

答案 4 :(得分:1)

您可以创建自己的标题:

            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 
                ],
              )),

答案 5 :(得分:0)

尝试一下:

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"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这是输出的屏幕截图:

enter image description here

答案 6 :(得分:0)

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

    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'),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      }
    }