📜  Flutter – CircleAvatar 小工具

📅  最后修改于: 2021-09-02 05:52:52             🧑  作者: Mango

CircleAvatar小部件内置于flutter SDK 中。它只是一个圆圈,我们可以在其中添加背景颜色、背景图像或一些文本。它通常用他的图像或他的姓名首字母代表用户。虽然我们可以从头开始制作一个类似的小部件,但这个小部件在应用程序的快速开发中会派上用场。

CircleAvatar 类的构造函数:

const CircleAvatar(
{Key key,
Widget child,
Color backgroundColor,
ImageProvider backgroundImage,
void onBackgroundImageError(
dynamic exception,
StackTrace stackTrace
),
Color foregroundColor,
double radius,
double minRadius,
double maxRadius}
)




CircleAvatar 小部件的属性:

  • backgroundColor:该属性以颜色类( final)为参数。此属性决定圆圈的背景颜色,默认情况下,它设置为ThemeData.primaryColorLight。
  • backgroundImage:此属性将ImageProvider 类(最终)作为参数。此属性将背景图像应用于CircleAvatar小部件。
  • child: child属性将小部件放置在小部件树中的CircleAvatar小部件下方或将小部件显示在圆圈内。
  • foregroundColor:此属性将Color类 ( final)作为参数值。它决定了CircleAvatar 中文本的默认颜色
  • maxRadius:此属性采用精度值来决定CircleAvatar可以达到的最大尺寸。
  • minRadius:这个minRadius属性也接受一个 double 值作为参数,它决定了CirculAvatar的最小尺寸
  • onBackgroundImageError:此属性控制如果由于某种原因缺少背景图像时要执行的操作。
  • radius: radius属性也有一个double值作为参数来决定CircleAvatar的大小,如果它的半径。

句法:

void Function(
dynamic exception,
StackTrace stackTrace
) onBackgroundImageError

示例 1:在此示例中,我们显示了一个绿色圆圈,其中包含一些文本。

主要的。dart

Dart
import 'package:flutter/material.dart';
  
void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.greenAccent[400],
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Menu',
            onPressed: () {},
          ), //IcoButton
          actions: [
            IconButton(
              icon: Icon(Icons.comment),
              tooltip: 'Comment',
              onPressed: () {},
            ), //IconButton
          ], //[]
        ), //AppBar
        body: Center(
          child: CircleAvatar(
            backgroundColor: Colors.greenAccent[400],
            radius: 100,
            child: Text(
              'GeeksForGeeks',
              style: TextStyle(fontSize: 25, color: Colors.white),
            ), //Text
          ), //CirlceAvatar
        ), //Center
      ), //Scaffold
      debugShowCheckedModeBanner: false,
    ), //MaterialApp
  );
}


输出:

注意:我们也可以使用foregroundColor属性来
指定默认文本颜色,而不是在 TextStyle 中执行。

...
foregroundColor: Colors.white,
   ...

说明:CircularAvatar小部件中,我们将半径设置为100背景色设置greenAccent[400]CircleAvatarText小部件视为子项。文字是“GeeksforGeeks”。我们还通过将字体大小设置为 25 和文本颜色为白色来对文本进行样式设置。

示例 2:这里我们在CirlceAvatar 中添加了来自互联网的图像。

// Code snippet of CircleAvatar
       ...     
          body: Center(
          child: CircleAvatar(
            backgroundImage: NetworkImage(
                "https://pbs.twimg.com/profile_images/1304985167476523008/QNHrwL2q_400x400.jpg"),
            radius: 100,
          ), //CircleAvatar
          ...

输出:

说明:在本例中,我们使用backgroundImage属性在CircleAvatar小部件内设置了一个图像。该图像是 geekforgeeks 徽标,其地址在NetworkImages的参数中提供。最后,我们为 CircleAvatar 的半径指定了 100 作为值。

示例 3:在此示例中,我们在CircleAvatar周围添加了边框。

// Code snippet of CircleAvatar
        ...
        body: Center(
          child: CircleAvatar(
            backgroundColor: Colors.green,
            radius: 115,
            child: CircleAvatar(
              backgroundColor: Colors.greenAccent[100],
              radius: 110,
              child: CircleAvatar(
                backgroundImage: NetworkImage(
                    "https://pbs.twimg.com/profile_images/1304985167476523008/QNHrwL2q_400x400.jpg"), //NetworkImage
                radius: 100,
              ), //CircleAvatar
            ), //CircleAvatar
          ), //CircleAvatar
        ), //Center
        ...

输出:

说明:这里我们在上一个示例中添加的NetworkImage周围添加了两个边框。从本质上讲我们有什么下来是我们包裹其中包含图像,具有100像素的半径,具有更大的尺寸的两个CircleAvatar小部件CircleAvatar。现在,最顶部的 CircleAvatar 被赋予绿色背景和 115 像素的边框半径。在其下方的CircleAvatar中,我们将backgroundColor设置为greenAccent [400],其半径为 110 px。

所以,这是我们如何能够在小部件flutter和这些例子完整的代码使用CircleAvatar,您可以点击这里。

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?
单击此处前往由我们的专家精心策划的指南,旨在让您立即做好行业准备!