用滑块选择一个值

本课属于 Coddy Flutter 学习旅程的“让应用具有交互性”单元。第 29 课，共 34 课。

Slider 可以通过拖动，从一个范围内选取数字。和开关一样，它会显示自己的 value:，并用新值调用 onChanged：

Slider(
  value: _size,
  min: 0,
  max: 50,
  divisions: 5,
  onChanged: (double value) {
    setState(() {
      _size = value;
    });
  },
)

min: 和 max: 是范围的两端。divisions: 会让数值按步长跳变：从 0 到 50 分成 5 份，数值就是 0、10、20、30、40 和 50。不设置它时，中间的所有数值都可以选。你也可以点击轨道，滑块会跳到点击的位置。

这个值始终是 double，所以显示为 20.0。_size.round() 会将它四舍五入到最近的整数，即 int，显示为 20。

挑战

简单

让滑块移动：使用 setState 将它的值存储在 _volume 中。
在滑块下方将音量显示为整数：显示 Volume: 20，而不是 Volume: 20.0。

亲手试试

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  double _volume = 20;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sound')),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Icon(Icons.volume_up, size: 64),
            Slider(
              value: _volume,
              min: 0,
              max: 100,
              divisions: 10,
              onChanged: (double value) {},
            ),
            Text('Volume: ?', style: const TextStyle(fontSize: 24)),
          ],
        ),
      ),
    );
  }
}