Element 系列组件之 计数器组件

介绍

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

引入

在 「pubspec.yaml」 中依赖

代码语言：javascript复制

element_ui: ^0.0.1

import

代码语言：javascript复制

import 'package:element_ui/widgets.dart';

基础用法

「height」：设置高度。

代码语言：javascript复制

EInputNumber(
  height: 45,
)

「value」: 设置初始值

代码语言：javascript复制

EInputNumber(
  height: 45,
  value: 2,
)

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

代码语言：javascript复制

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

「step」：步数，默认 1

代码语言：javascript复制

EInputNumber(
  height: 45,
  step: 5,
)

「precision」: 精度，默认0

代码语言：javascript复制

EInputNumber(
  height: 45,
  precision: 1,
)

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

代码语言：javascript复制

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

代码语言：javascript复制

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

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

代码语言：javascript复制

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

「style」：类型为 「EInputNumberStyle」。

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

代码语言：javascript复制

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

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

代码语言：javascript复制

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

border element height icon min

0 人点赞