如何使滑块离散？ [英] How to make slider discrete?

问题描述

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

How to make slider discrete look like image above in Flutter? slider discrete

推荐答案

使用divisions 属性/Slider-class.html rel = nofollow noreferrer>滑块小部件将其划分为相等的部分，然后必须在它们下面放置 Text 小部件：

Use the divisions property of the Slider widget to divide it into equal portions, then you have to put Text widgets under them:

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

这篇关于如何使滑块离散？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！