如何使滑块离散化？

Question

如何使Flutter中的滑块离散化，看起来像上面的图片？离散化滑块

- Manh Hung

Answer 1

使用 Slider 小部件的 divisions 属性将其分成相等的部分，然后在它们下面放置 Text 小部件。

 Container(
  width: MediaQuery.of(context).size.width,
  height: 200.0,
  child: Column(
   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
   children: <Widget>[

     Slider(min: 0.0, max: 1.0, divisions: 9, value: 0.0, onChanged: null); // you have to provide an `onChanged` function to let slider pointer change place, and to execute other related actions.

     Row(
       mainAxisAlignment: MainAxisAlignment.spaceEvenly,

       children: <Widget>[
       Container(
         child: Text('6'),
       ),
       Container(
         child: Text('7'),
       ),
       Container(
         child: Text('8'),
       ),
       Container(
         child: Text('9'),
       ),
       Container(
         child: Text('10'),
       ),
       Container(
         child: Text('11'),
       ),
       Container(
         child: Text('12'),
       ),
       Container(
         child: Text('13'),
       ),
       Container(
         child: Text('14'),
       ),
     ]
   ),
 ]),
)

- Mazin Ibrahim

---

谢谢！我正在尝试应用代码，看起来不错，容器中的数字可以应用边距或填充以居中在分区节点下 :) - Manh Hung