Flutter中常用的组件-CircleAvatar

Posted 2023-02-02 不二菜菜子

new Column(
        children: [
          //CircleAvatar 只是一个圆圈，可以在其中添加背景颜色、背景图像或一些文本。它通常用他的图像或他的姓名首字母代表用户。虽然可以从头开始制作一个类似的小部件，但这个小部件在应用程序的快速开发中会派上用场。
          new CircleAvatar(
            child: new CircleAvatar(
              foregroundImage: NetworkImage(
                  'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
              radius: 30.0,

              //onForegroundImageError - 一个可选的回调函数 - 在 ForegroundImage 发生图像加载错误时调用
              onForegroundImageError:
                  (dynamic exception, StackTrace? stackTrace) 
                setState(() 
                  print("Error loading image! " + exception.toString());

                  setState(() 
                    print("加载失败啦！！！");
                  );
                );
              ,
            ),

            //backgroundColor - CircleAvatar 的背景颜色。如果 foregroundColor 为深色，backgroundColor 的默认值为 ThemeData.primaryColorLight，如果 foregroundColor 为浅色，则默认值为 ThemeData.primaryColorDark。
            // backgroundColor: Colors.teal,

            //foregroundColor:CircleAvatar 中文本的默认颜色。如果 backgroundColor 为深色，则 foregroundColor 的默认值为 ThemeData.primaryColorLight，如果 backgroundColor 为浅色，则为 ThemeData.primaryColorDark。
            // foregroundColor: Colors.amber,

            //radius - CircleAvatar 圆的半径。如果指定了半径，则不能指定 minRadius 和 maxRadius。指定半径也等同于指定 minRadius 和 maxRadius 的值，它们都具有相同的值。
            radius: 50.0,
            //maxRadius - CircleAvatar 的最大半径。如果指定了 maxRadius，则不会指定半径。Flutter 会根据可用空间自动为 CircleAvatar 计算合适的大小
            // minRadius:10.2,
            //minRadius - CircleAvatar 的最小半径。如果指定了 minRadius，则不会指定半径。Flutter 会根据可用空间自动为 CircleAvatar 计算合适的大小。
            // maxRadius:20,

            //background Image - Circle Avatar 的背景图像，即用户的头像。如果要在 CircleAvatar 上显示用户的姓名首字母，请使用 child 属性。
            backgroundImage: NetworkImage(
                'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),

            //onBackgroundImageError - 一个可选的回调函数 - 在 backgroundImage 发生图像加载错误时调用
            onBackgroundImageError:
                (dynamic exception, StackTrace? stackTrace) 
              print("Error loading image! " + exception.toString());

              setState(() 
                print("加载失败啦！！！");
              );
            ,
          ),
        ],
      ),