如何使滑块离散？

Question

如何使滑块离散看起来像上面的Flutter中的图像？ slider discrete

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'),
       ),
     ]
   ),
 ]),
)