flutter 抖动-如何控制抽屉中的轮廓图像大小

nszi6y05  于 2023-01-14  发布在  Flutter
关注(0)|答案(8)|浏览(126)

我想控制配置文件图像的大小,并得到它圆形,而不是椭圆形,如下所示。
改变高度和/或宽度值不会影响大小和比例,奇怪的是当我改变边距参数时,椭圆形的半径也会改变。

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的图像大小,请分享该方法以获得帮助。
4ioopgfo

4ioopgfo1#

网络映像使用此代码:

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

                    ),
n53p2ov0

n53p2ov02#

如果你使用backgroundImage作为CircleAvatar的图像提供者,那么改变radius属性实际上没有任何效果。从源代码circle_avatar.dart可以观察到图像被渲染为BoxFit。cover DecorationImage(image: backgroundImage, fit: BoxFit.cover)-在user_accounts_drawer_header.dartcurrentAccountPicture被硬编码为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团队在未来能在这方面增加一些控制水平。
不是答案,只是更多的信息,希望能帮助别人。

t5fffqht

t5fffqht3#

试试这个:

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

这是输出的屏幕截图:

cgfeq70w

cgfeq70w4#

将你的图片 Package 在CircleAvatar小工具中,它就是为了这个目的而设计的。

ny6fqffe

ny6fqffe5#

您将边距放在图像的容器内,而您必须使用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),
          )),
        ),
xbp102n0

xbp102n06#

您可以创建自己的标题:

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

i7uq4tfw7#

**我找到了解决办法!**至少这对我有效

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

7cjasjjr8#

这对我很有效:

DrawerHeader(
              decoration: BoxDecoration(color: Colors.blue),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  /*CircleAvatar(
                    radius: 50.0,
                    backgroundColor: const Color(0xFF778899),
                    child: new Image.asset('assets/images/profile_image.png'), //For Image Asset
                  ),*/
                  Container(
                    height: 110,
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(100.0),
                      child: Image.asset('assets/images/profile_image.png'),
                    ),
                  ),
                  //These can go here or below the header with the same background color
                  //Divider(height: 1.0, thickness: 1.0, color: Colors.black),
                  SizedBox(height: 9.0),
                  Text("user name"),
                  //...additional header items here
                ],
              ),
          ),

相关问题