Element 系列组件之计数器组件

老孟Flutter

发布于 2021-12-04 16:54:21

7140

发布于 2021-12-04 16:54:21

文章被收录于专栏：FlutterFlutter

介绍

「EInputNumber」 组件是 「Flutter Element」 组件系列中的计数器组件，允许输入标准的数字值，可定义范围。

引入

在 「pubspec.yaml」 中依赖

element_ui: ^0.0.1

import

import 'package:element_ui/widgets.dart';

基础用法

「height」：设置高度。

EInputNumber(
  height: 45,
)

「value」: 设置初始值

EInputNumber(
  height: 45,
  value: 2,
)

「max」、「min」 ：设置最大/小值

EInputNumber(
  height: 45,
  max: 10,
  min: 0,
)

「step」：步数，默认 1

EInputNumber(
  height: 45,
  step: 5,
)

「precision」: 精度，默认0

EInputNumber(
  height: 45,
  precision: 1,
)

「type」: 控制按钮的位置，默认 「side」

- **side**：两边
- **right**：右边

EInputNumber(
  height: 45,
  type: InputNumberControlType.right,
)

「onChanged」: 值发生变化时回调。

EInputNumber(
  height: 45,
  onChanged: (value){
    print('value:$value');
  },
)

「style」：类型为 「EInputNumberStyle」。

「fontColor」 ：字体颜色
「backgroundColor」: 背景颜色
「borderColor」: 线框颜色

EInputNumber(
  height: 45,
  style: EInputNumberStyle(
    fontColor: Colors.red,
    backgroundColor: Colors.green,
    borderColor: Colors.blue,
  ),
)

「focusBorderColor」: 获取焦点时边框颜色
「iconColor」: 控制图标的颜色
「iconBackgroundColor」 ：控制图标的背景颜色
「borderRadius」: 圆角

EInputNumber(
  height: 45,
  style: EInputNumberStyle(
    focusBorderColor: Colors.red,
    iconColor: Colors.red,
    iconBackgroundColor: Colors.green,
    borderRadius: BorderRadius.all(Radius.circular(25))
  ),
)