如何设计的扑计时器

如何解决如何设计的扑计时器

我想要这种设计，用于在颤振中设置计时器，如图所示。我怎样才能实现这个设计。我搜索了它，但没有找到任何东西。

解决方法

您可以将小部件与 ListWheelScrollView 结合使用。

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key,this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),),body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
            Container(
              height: 200.0,child: Stack(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,children: [
                      _buildHourPicker(),SizedBox(width: 10.0),buildDivider(),buildMinutePicker(),buildSecondsPicker(),],IgnorePointer(
                    child: Container(
                      height: 60,decoration: BoxDecoration(
                        gradient: LinearGradient(
                          colors: [Colors.white,Colors.white10],begin: Alignment.topCenter,end: Alignment.bottomCenter,IgnorePointer(
                    child: Align(
                      alignment: Alignment.bottomCenter,child: Container(
                        height: 60,decoration: BoxDecoration(
                          gradient: LinearGradient(
                            colors: [Colors.white10,Colors.white],);
  }

  buildDivider() {
    return Text(':',style: TextStyle(
      fontWeight: FontWeight.w600,fontSize: 30.0,);
  }

  Widget _buildHourPicker() {
    return Container(
      width: 50.0,height: 200.0,child: ListWheelScrollView(
        onSelectedItemChanged: (val) {},controller: FixedExtentScrollController(initialItem: 00),itemExtent: 40.0,// useMagnifier: true,children: List<Widget>.generate(
          12,(int index) {
            final int displayHour = index + 1;

            return _TimeText(text: displayHour.toString());
          },);
  }

  buildMinutePicker() {
    return Container(
      width: 50.0,children: List<Widget>.generate(
          60,(int index) {
            return _TimeText(text: index.toString());
          },);
  }

  buildSecondsPicker() {
    return Container(
      width: 50.0,controller: FixedExtentScrollController(initialItem: 0),);
  }
}

class _TimeText extends StatelessWidget {
  final String text;

  _TimeText({this.text});

  @override
  Widget build(BuildContext context) {
    return Text(
      text.padLeft(2,'0'),style: TextStyle(
        fontWeight: FontWeight.w600,fontSize: 24.0,);
  }
}