flutter如何实现体重选择器

在Flutter中如何实现一个类似健康APP中的体重选择器？需要支持滑动选择数值，最好能自定义刻度样式和范围。目前尝试用Slider控件但无法满足精确到小数点后一位的需求，是否有现成的轮子或推荐的最佳实践方案？

2 回复

使用Flutter实现体重选择器，可通过以下方式：

  1. 使用showModalBottomSheet弹出底部选择器
  2. 结合CupertinoPicker或ListWheelScrollView实现滚动选择
  3. 设置体重范围（如30-200kg），间隔0.1kg
  4. 添加确认回调返回选中值

示例代码：

showModalBottomSheet(
  context: context,
  builder: (ctx) => SizedBox(
    height: 200,
    child: CupertinoPicker(
      itemExtent: 40,
      onSelectedItemChanged: (index) {},
      children: List.generate(1701, (i) => Text('${30 + i * 0.1}kg')),
    ),
  ),
);

更多关于flutter如何实现体重选择器的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，可以通过以下方式实现一个简单实用的体重选择器：

核心实现方案

1. 使用 NumberPicker 组件

import 'package:flutter/material.dart';
import 'package:numberpicker/numberpicker.dart';

class WeightPicker extends StatefulWidget {
  @override
  _WeightPickerState createState() => _WeightPickerState();
}

class _WeightPickerState extends State<WeightPicker> {
  int _weight = 60; // 默认体重60kg
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('选择体重', style: TextStyle(fontSize: 18)),
        NumberPicker(
          value: _weight,
          minValue: 20,
          maxValue: 200,
          onChanged: (value) {
            setState(() {
              _weight = value;
            });
          },
        ),
        Text('当前体重: $_weight kg', style: TextStyle(fontSize: 16)),
      ],
    );
  }
}

2. 自定义滑动选择器

class CustomWeightPicker extends StatefulWidget {
  @override
  _CustomWeightPickerState createState() => _CustomWeightPickerState();
}

class _CustomWeightPickerState extends State<CustomWeightPicker> {
  double _weight = 65.5;
  final FixedExtentScrollController _controller = FixedExtentScrollController();
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ListWheelScrollView(
          controller: _controller,
          itemExtent: 50,
          children: List.generate(181, (index) {
            double weight = 20.0 + index * 0.5;
            return Center(
              child: Text(
                '$weight kg',
                style: TextStyle(
                  fontSize: weight == _weight ? 24 : 18,
                  color: weight == _weight ? Colors.blue : Colors.grey,
                ),
              ),
            );
          }),
          onSelectedItemChanged: (index) {
            setState(() {
              _weight = 20.0 + index * 0.5;
            });
          },
        ),
        SizedBox(height: 20),
        Text('选择体重: $_weight kg', style: TextStyle(fontSize: 18)),
      ],
    );
  }
}

使用步骤

  1. 添加依赖（如果使用numberpicker）：
dependencies:
  numberpicker: ^2.1.1
  1. 主要特性：
  • 支持整数和小数体重选择
  • 可自定义体重范围（如20-200kg）
  • 支持精确到0.5kg的精度
  • 提供视觉反馈和当前值显示

优化建议

  • 添加确认按钮来最终确定选择
  • 支持保存用户上次选择的体重
  • 添加动画效果提升用户体验
  • 可根据应用主题自定义样式

这种实现方式简单高效，能够满足大部分体重选择的需求。

回到顶部