Flutter 初识：数据显示控件

数星星的磊

于 2024-08-08 15:30:00 发布

阅读量787

点赞数 22

分类专栏： Flutter 初识文章标签： flutter

本文链接：https://blog.csdn.net/yang_6799/article/details/139377428

版权

Flutter 初识专栏收录该内容

12 篇文章 0 订阅

订阅专栏

CircularProgressIndicator: 圆形进度条。

CircularProgressIndicator 是 Flutter 中用于显示圆形进度指示器的小部件。它可以显示确定或不确定的进度状态

属性解析

const CircularProgressIndicator({
    super.key,
    super.value,
    super.backgroundColor,
    super.color,
    super.valueColor,
    this.strokeWidth = 4.0,
    this.strokeAlign = strokeAlignCenter,
    super.semanticsLabel,
    super.semanticsValue,
    this.strokeCap,
  })

value (double?): 当前进度值，介于 0.0 到 1.0 之间。如果为 null，则显示一个不确定的进度指示器。
backgroundColor (Color?): 指示器的背景颜色。
color (Color?): 指示器的前景颜色。如果提供了 valueColor，则忽略此参数。
valueColor (Animation<Color?>?): 指示器前景颜色的动画版本，通常用于创建渐变效果。
strokeWidth (double): 圆环的宽度，默认值为 4.0。
strokeAlign (double): 描边对齐方式，默认为 strokeAlignCenter。
semanticsLabel (String?): 用于屏幕阅读器的语义标签。
semanticsValue (String?): 用于屏幕阅读器的语义值。
strokeCap (StrokeCap?): 圆环端点的形状，可选值为 StrokeCap.butt, StrokeCap.round, StrokeCap.square。

示例如下：ProgressIndicator

LinearProgressIndicator

LinearProgressIndicator 是 Flutter 中用于显示线性进度指示器的小部件。它可以显示确定或不确定的进度状态。

属性解析

const LinearProgressIndicator({
    super.key,
    super.value,
    super.backgroundColor,
    super.color,
    super.valueColor,
    this.minHeight,
    super.semanticsLabel,
    super.semanticsValue,
    this.borderRadius = BorderRadius.zero,
  })

value (double?): 当前进度值，介于 0.0 到 1.0 之间。如果为 null，则显示一个不确定的进度指示器。
backgroundColor (Color?): 指示器的背景颜色。
color (Color?): 指示器的前景颜色。如果提供了 valueColor，则忽略此参数。
valueColor (Animation<Color?>?): 指示器前景颜色的动画版本，通常用于创建渐变效果。
minHeight (double?): 最小高度，可以用来设置进度条的高度。
semanticsLabel (String?): 用于屏幕阅读器的语义标签。
semanticsValue (String?): 用于屏幕阅读器的语义值。
borderRadius (BorderRadius): 设置进度条的圆角半径，默认为 BorderRadius.zero。

示例如下：ProgressIndicator

ProgressIndicator: 显示进度条，可以是线性或圆形。

ProgressIndicator 是 Flutter 中用于显示进度的基础小部件。它通常用于展示任务的进度，如文件下载、数据加载等。Flutter 提供了多种类型的进度指示器，包括 LinearProgressIndicator 和 CircularProgressIndicator。

属性解析

 const ProgressIndicator({
    super.key,
    this.value,
    this.backgroundColor,
    this.color,
    this.valueColor,
    this.semanticsLabel,
    this.semanticsValue,
  })

value (double?): 当前进度值，介于 0.0 到 1.0 之间。如果为 null，则显示一个不确定的进度指示器。
backgroundColor (Color?): 指示器的背景颜色。
color (Color?): 指示器的前景颜色（仅适用于 LinearProgressIndicator）。
valueColor (Animation<Color?>?): 指示器前景颜色的动画版本，通常用于创建渐变效果。
semanticsLabel (String?): 用于屏幕阅读器的语义标签。
semanticsValue (String?): 用于屏幕阅读器的语义值。

示例

class WidgetPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('ProgressIndicator 示例')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 确定进度的 LinearProgressIndicator
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: LinearProgressIndicator(
                  value: 0.7, // 当前进度
                  backgroundColor: Colors.grey[200],
                  color: Colors.blue,
                  semanticsLabel: '线性进度条',
                  semanticsValue: '70%',
                ),
              ),
              SizedBox(height: 20),
              // 不确定进度的 LinearProgressIndicator
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: LinearProgressIndicator(
                  backgroundColor: Colors.grey[200],
                  color: Colors.blue,
                  semanticsLabel: '线性进度条（不确定）',
                ),
              ),
              SizedBox(height: 40),
              // 确定进度的 CircularProgressIndicator
              CircularProgressIndicator(
                value: 0.5, // 当前进度
                backgroundColor: Colors.grey[200],
                valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
                semanticsLabel: '圆形进度条',
                semanticsValue: '50%',
              ),
              SizedBox(height: 20),
              // 不确定进度的 CircularProgressIndicator
              CircularProgressIndicator(
                backgroundColor: Colors.grey[200],
                valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
                semanticsLabel: '圆形进度条（不确定）',
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这里插入图片描述

LinearProgressIndicator: 分别展示了确定进度和不确定进度的线性进度条。通过设置 value 参数来指定确定进度，当 value 为 null 时表示不确定进度。
CircularProgressIndicator: 同样展示了确定进度和不确定进度的圆形进度条，通过设置 value 参数来指定确定进度，当 value 为 null 时表示不确定进度。
backgroundColor: 设置进度条的背景颜色。
color 和 valueColor: color 用于 LinearProgressIndicator 前景色，而 valueColor 可以用于为 CircularProgressIndicator 创建动画颜色效果。
semanticsLabel 和 semanticsValue: 用于屏幕阅读器，帮助无障碍访问。

使用指南

确定进度: 当你有明确的进度值时，可以将 value 设置为一个介于 0.0 到 1.0 的值。
不确定进度: 当你不确定进度或希望显示一个无限循环进度条时，可以将 value 设置为 null。
自定义外观: 通过 backgroundColor 和 color 或 valueColor 参数，自定义进度指示器的外观以适应你的应用主题。
无障碍支持: 使用 semanticsLabel 和 semanticsValue 提供描述性文本，以增强无障碍体验。

通过这些参数和示例，你可以灵活地在 Flutter 应用中显示各种类型的进度指示器。

Tooltip: 长按时显示提示信息。

Tooltip 是 Flutter 中用于显示工具提示的小部件，当用户长按或悬停在某个元素上时会出现一个带有说明信息的弹出框。

属性解析

const Tooltip({
    super.key,
    this.message,
    this.richMessage,
    this.height,
    this.padding,
    this.margin,
    this.verticalOffset,
    this.preferBelow,
    this.excludeFromSemantics,
    this.decoration,
    this.textStyle,
    this.textAlign,
    this.waitDuration,
    this.showDuration,
    this.exitDuration,
    this.enableTapToDismiss = true,
    this.triggerMode,
    this.enableFeedback,
    this.onTriggered,
    this.child,
  })

message (String?): 要显示的工具提示消息。与 richMessage 互斥。
richMessage (InlineSpan?): 支持富文本格式的工具提示消息。与 message 互斥。
height (double?): 工具提示的高度。
padding (EdgeInsetsGeometry?): 工具提示内容的内边距。
margin (EdgeInsetsGeometry?): 工具提示与其目标小部件之间的外边距。
verticalOffset (double?): 工具提示与其目标小部件之间的垂直偏移量。
preferBelow (bool?): 是否优先在目标小部件下方显示工具提示。如果为 false，则优先在其上方显示。
excludeFromSemantics (bool?): 是否从语义树中排除这个工具提示，默认为 false。
decoration (Decoration?): 工具提示背景的装饰，如颜色、阴影等。
textStyle (TextStyle?): 工具提示文本的样式。
textAlign (TextAlign?): 工具提示文本的对齐方式。
waitDuration (Duration?): 用户悬停在目标小部件上一段时间后显示工具提示的等待时间。
showDuration (Duration?): 工具提示显示的持续时间。
exitDuration (Duration?): 工具提示消失的动画时间。
enableTapToDismiss (bool): 是否允许通过点击工具提示来关闭它，默认值为 true。
triggerMode (TooltipTriggerMode?): 工具提示触发模式，可以是 longPress 或 tap。
enableFeedback (bool?): 是否启用反馈（如声音或振动）。
onTriggered (VoidCallback?): 当工具提示被触发时调用的回调函数。
child (Widget?): 包含该工具提示的小部件。

示例

class WidgetPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Tooltip 示例')),
        body: Center(
          child: Tooltip(
            message: '这是一个按钮',
            height: 32.0,
            padding: EdgeInsets.all(8.0),
            margin: EdgeInsets.symmetric(horizontal: 20.0),
            verticalOffset: 24.0,
            preferBelow: false,
            decoration: BoxDecoration(
              color: Colors.blue.withOpacity(0.9),
              borderRadius: BorderRadius.circular(4.0),
            ),
            textStyle: TextStyle(
              fontSize: 16.0,
              color: Colors.white,
            ),
            waitDuration: Duration(milliseconds: 500),
            showDuration: Duration(seconds: 2),
            enableTapToDismiss: true,
            triggerMode: TooltipTriggerMode.tap,
            child: ElevatedButton(
              onPressed: () {},
              child: Text('长按或点击我'),
            ),
          ),
        ),
      ),
    );
  }
}

在这里插入图片描述

Stepper

Stepper 是 Flutter 中用于显示多步骤流程的小部件，通常用于需要分阶段完成的任务。它允许用户依次导航各个步骤，可以垂直或水平显示。

属性解析

const Stepper({
    super.key,
    required this.steps,
    this.controller,
    this.physics,
    this.type = StepperType.vertical,
    this.currentStep = 0,
    this.onStepTapped,
    this.onStepContinue,
    this.onStepCancel,
    this.controlsBuilder,
    this.elevation,
    this.margin,
    this.connectorColor,
    this.connectorThickness,
    this.stepIconBuilder,
  })

steps (List): 必需参数，为每一步定义内容和行为的列表。
controller (ScrollController?): 控制 Stepper 滚动的控制器。
physics (ScrollPhysics?): 控制 Stepper 滚动行为的物理属性。
type (StepperType): 定义 Stepper 的布局类型，可以是 StepperType.vertical 或 - StepperType.horizontal，默认为 StepperType.vertical。
currentStep (int): 当前活动步的索引，默认为 0。
onStepTapped (ValueChanged?): 当某一步被点击时调用的回调函数，传入当前步骤的索引。
onStepContinue (VoidCallback?): 当继续按钮被点击时调用的回调函数。
onStepCancel (VoidCallback?): 当取消按钮被点击时调用的回调函数。
controlsBuilder (ControlsWidgetBuilder?): 自定义控件生成器，用于自定义每一步的控制按钮。
elevation (double?): 步骤卡片的阴影高度。
margin (EdgeInsetsGeometry?): Stepper 的外边距。
connectorColor (Color?): 步骤之间连接线的颜色。
connectorThickness (double?): 步骤之间连接线的厚度。
stepIconBuilder (IndexedWidgetBuilder?): 自定义步骤图标生成器。

示例

class WidgetPage extends StatefulWidget {
  @override
  _WidgetPageState createState() => _WidgetPageState();
}

class _WidgetPageState extends State<WidgetPage> {
  int _currentStep = 0;

  void _onStepContinue() {
    setState(() {
      if (_currentStep < 2) {
        // 假设有3个步骤
        _currentStep += 1;
      }
    });
  }

  void _onStepCancel() {
    setState(() {
      if (_currentStep > 0) {
        _currentStep -= 1;
      }
    });
  }

  void _onStepTapped(int step) {
    setState(() {
      _currentStep = step;
    });
  }

  MaterialStateProperty<Color>? _connectorColor() {
    return MaterialStateProperty.resolveWith((states) {
      if (states.contains(MaterialState.selected)) {
        return Colors.blue; // 当前步骤或已完成步骤的颜色
      }
      return Colors.grey; // 默认的颜色
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Stepper 示例')),
        body: Stepper(
          steps: [
            Step(
              title: Text('步骤 1'),
              content: Text('这是第一个步骤的内容。'),
              isActive: _currentStep >= 0,
              state: _currentStep > 0 ? StepState.complete : StepState.indexed,
            ),
            Step(
              title: Text('步骤 2'),
              content: Text('这是第二个步骤的内容。'),
              isActive: _currentStep >= 1,
              state: _currentStep > 1 ? StepState.complete : StepState.indexed,
            ),
            Step(
              title: Text('步骤 3'),
              content: Text('这是第三个步骤的内容。'),
              isActive: _currentStep >= 2,
              state: _currentStep > 2 ? StepState.complete : StepState.indexed,
            ),
          ],
          currentStep: _currentStep,
          onStepTapped: _onStepTapped,
          onStepContinue: _onStepContinue,
          onStepCancel: _onStepCancel,
          type: StepperType.vertical,
          margin: EdgeInsets.all(16.0),
          connectorColor: _connectorColor(),
          connectorThickness: 2.0,
          elevation: 2.0,
          controlsBuilder: (BuildContext context, ControlsDetails details) {
            return Row(
              children: <Widget>[
                ElevatedButton(
                  onPressed: details.onStepContinue,
                  child: Text('继续'),
                ),
                SizedBox(width: 8.0),
                ElevatedButton(
                  onPressed: details.onStepCancel,
                  child: Text('取消'),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

在这里插入图片描述

Chip

Chip 是 Flutter 中用于显示信息的紧凑元素，它通常包含一个标签和可选的图标、删除按钮等，并且可以用作交互式元素。

属性解析

const Chip({
    super.key,
    this.avatar,
    required this.label,
    this.labelStyle,
    this.labelPadding,
    this.deleteIcon,
    this.onDeleted,
    this.deleteIconColor,
    this.deleteButtonTooltipMessage,
    this.side,
    this.shape,
    this.clipBehavior = Clip.none,
    this.focusNode,
    this.autofocus = false,
    this.color,
    this.backgroundColor,
    this.padding,
    this.visualDensity,
    this.materialTapTargetSize,
    this.elevation,
    this.shadowColor,
    this.surfaceTintColor,
    this.iconTheme,
  })

avatar (Widget?): 要显示在标签前的小部件，通常是一个圆形头像。
label (Widget): 必需参数，表示 Chip 的主要内容，通常是文本。
labelStyle (TextStyle?): 标签的文本样式。
labelPadding (EdgeInsetsGeometry?): 标签的内边距。
deleteIcon (Widget?): 删除图标的小部件。
onDeleted (VoidCallback?): 当删除图标被点击时调用的回调函数。
deleteIconColor (Color?): 删除图标的颜色。
deleteButtonTooltipMessage (String?): 删除按钮的工具提示信息。
side (BorderSide?): 边框的样式。
shape (OutlinedBorder?): Chip 的形状。
clipBehavior (Clip): 定义 Chip 的剪裁行为，默认为 Clip.none。
focusNode (FocusNode?): 处理键盘焦点的节点。
autofocus (bool): 是否自动获得焦点。
color (Color?): Chip 的颜色。这已弃用，请使用 backgroundColor。
backgroundColor (Color?): Chip 的背景颜色。
padding (EdgeInsetsGeometry?): Chip 的内边距。
visualDensity (VisualDensity?): 定义 Chip 的视觉密度。
materialTapTargetSize (MaterialTapTargetSize?): 控制触摸目标的大小。
elevation (double?): Chip 的阴影高度。
shadowColor (Color?): 阴影的颜色。
surfaceTintColor (Color?): 表面颜色的色调。
iconTheme (IconThemeData?): 图标主题，用于控制图标的外观。

示例

class WidgetPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Chip 示例')),
        body: Center(
          child: Wrap(
            spacing: 8.0,
            children: [
              Chip(
                avatar: CircleAvatar(
                  backgroundColor: Colors.blue.shade900,
                  child: Text('A'),
                ),
                label: Text('Avatar Chip'),
                onDeleted: () {
                  print('Avatar Chip deleted');
                },
                deleteIcon: Icon(Icons.cancel),
                deleteIconColor: Colors.red,
                deleteButtonTooltipMessage: 'Remove',
                backgroundColor: Colors.blue.shade100,
                labelStyle: TextStyle(
                  fontWeight: FontWeight.bold,
                  color: Colors.blue.shade900,
                ),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8.0),
                  side: BorderSide(color: Colors.blue.shade900),
                ),
                elevation: 4.0,
                shadowColor: Colors.blueAccent,
                padding: EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
              ),
              Chip(
                label: Text('Simple Chip'),
              ),
              Chip(
                label: Text('Disabled Chip'),
                onDeleted: null, // 禁用删除功能
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这里插入图片描述

Banner: 横幅，用于显示重要通知或广告。

属性解析

示例

Badge

Badge 是 Flutter 中用于显示额外信息的小部件，通常出现在图标或按钮的角落，以提示用户某些状态或通知

属性解析

const Badge({
    super.key,
    this.backgroundColor,
    this.textColor,
    this.smallSize,
    this.largeSize,
    this.textStyle,
    this.padding,
    this.alignment,
    this.offset,
    this.label,
    this.isLabelVisible = true,
    this.child,
  })

backgroundColor (Color?): 徽章的背景颜色。
textColor (Color?): 徽章文本的颜色。
smallSize (double?): 小号徽章的尺寸。
largeSize (double?): 大号徽章的尺寸。
textStyle (TextStyle?): 徽章文本的样式。
padding (EdgeInsetsGeometry?): 徽章内容的内边距。
alignment (AlignmentGeometry?): 徽章相对于 child 的对齐方式。
offset (Offset?): 徽章相对于 child 的偏移量。
label (Widget?): 徽章的标签，可以是一个文本或任何小部件。
isLabelVisible (bool): 是否显示标签，默认为 true。
child (Widget?): 包含徽章的小部件。

示例

class WidgetPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Badge 示例')),
        body: Center(
          child: Stack(
            children: [
              Badge(
                backgroundColor: Colors.red,
                textColor: Colors.white,
                smallSize: 12.0,
                largeSize: 24.0,
                textStyle: TextStyle(
                  fontSize: 12.0,
                  fontWeight: FontWeight.bold,
                ),
                padding: EdgeInsets.all(4.0),
                alignment: Alignment.topRight,
                offset: Offset(-8, -8),
                label: Text('99+'),
                isLabelVisible: true,
                child: Icon(
                  Icons.notifications,
                  size: 48.0,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class Badge extends StatelessWidget {
  const Badge({
    Key? key,
    this.backgroundColor,
    this.textColor,
    this.smallSize,
    this.largeSize,
    this.textStyle,
    this.padding,
    this.alignment = Alignment.topRight,
    this.offset = Offset.zero,
    this.label,
    this.isLabelVisible = true,
    required this.child,
  }) : super(key: key);

  final Color? backgroundColor;
  final Color? textColor;
  final double? smallSize;
  final double? largeSize;
  final TextStyle? textStyle;
  final EdgeInsetsGeometry? padding;
  final AlignmentGeometry alignment;
  final Offset offset;
  final Widget? label;
  final bool isLabelVisible;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Stack(
      clipBehavior: Clip.none,
      children: [
        child,
        if (isLabelVisible)
          Positioned(
            right: offset.dx,
            top: offset.dy,
            child: Container(
              padding: padding ?? EdgeInsets.all(4.0),
              decoration: BoxDecoration(
                color: backgroundColor ?? Colors.red,
                borderRadius: BorderRadius.circular(12.0),
              ),
              constraints: BoxConstraints(
                minWidth: smallSize ?? 16.0,
                minHeight: smallSize ?? 16.0,
                maxWidth: largeSize ?? 24.0,
                maxHeight: largeSize ?? 24.0,
              ),
              child: Center(
                child: DefaultTextStyle(
                  style: textStyle ??
                      TextStyle(
                        color: textColor ?? Colors.white,
                        fontSize: 12.0,
                        fontWeight: FontWeight.bold,
                      ),
                  child: label ?? SizedBox.shrink(),
                ),
              ),
            ),
          ),
      ],
    );
  }
}

在这里插入图片描述

数星星的磊

关注

22
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
Flutter 初识：数据显示控件

Stepper 是 Flutter 中用于显示多步骤流程的小部件，通常用于需要分阶段完成的任务。它可以显示确定或不确定的进度状态。Tooltip 是 Flutter 中用于显示工具提示的小部件，当用户长按或悬停在某个元素上时会出现一个带有说明信息的弹出框。Chip 是 Flutter 中用于显示信息的紧凑元素，它通常包含一个标签和可选的图标、删除按钮等，并且可以用作交互式元素。Badge 是 Flutter 中用于显示额外信息的小部件，通常出现在图标或按钮的角落，以提示用户某些状态或通知。
复制链接

扫一扫