如何在 android 和 flutter 上使用 IOS 样式选择器

Question

I use class to make my InkWell, and I am trying to use IOS style picker on android, but I used CupertinoPicker() and CupertinoDatePicker() than it doesn't work, I want make picker like this , What did i do wrong?

这是我的代码：

部分代码

List pickerChildren = [
  "male",
  "female",
  "secret",
];

CupertinoPicker(
      itemExtent: 40,
      selectionOverlay: ,
      onSelectedItemChanged: (value) {
        print("Choose gender：${pickerChildren[value]}");
        print("$value");
        setState(() {
          selectedValue = value;
        });
      },
      children: pickerChildren.map((data) {
        return Text(data);
      }).toList(),
    )

所有代码

final sports = ["walking slowly (4km/hour)", "walking fast, walking (6.0km/hour)","down stairs","up stairs",
  "Jogging (8 km/h)", "Quick running (12 km/h)", "Quick running (16 km/h)", "Riding a bicycle (normal speed, 10 km/h)",
  "Riding a bicycle (fast, 20 km/h)", "Riding a bicycle (fast, 30 km/h)", "Mopping the floor", "Gardening",
  "Farming, pasture, fishing, forestry", "lifting heavy objects", "yoga", "dancing (slow), Yuanji dance", "dancing (fast), international standard dance", "Frisbee",
  "Volleyball", "Bowling", "Tai Chi", "Ping Pong", "Baseball and Softball", "Golf", "Inline Skating", "Badminton", "Swimming (Slow)", "Swimming (Fast) )",
  "Basketball (half court)", "Basketball (full court)", "Aerobic dance", "Tennis", "Football", "Rope skipping (slow)", "Rope skipping (fast)"];
final rsports = ["walking slowly", "walking fast, walking", "down stairs", "up stairs", "jogging", "fast running", "fast running", "riding a bicycle", "riding a bicycle",
  "Bicycle", "Mopping the ground", "Gardening", "Farming, pasture, fishing, forestry", "Carrying heavy objects", "Yoga", "Dancing (slow)", "Dancing (fast)", "Frisbee ",
  "Volleyball", "Bowling", "Tai Chi", "Ping Pong", "Baseball and Softball", "Golf", "Inline Skating", "Badminton", "Swimming (Slow)", "Swimming (Fast) )",
  "Basketball (half court)", "Basketball (full court)", "Aerobic dance", "Tennis", "Football", "Rope skipping (slow)", "Rope skipping (fast)"];
class SContainer extends Container {
  final String Sstring;
  final IconData SIcon;

  SContainer({required this.SIcon, required this.Sstring,Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 42,
      color: Color(0xff65D3E6),
      child: Row(
        children: [
          Container(
            child: Icon(
              SIcon,
              size: 20,
              color: Colors.white,
            ),
            width: 42,
          ),
          Text(
            Sstring,
            style: TextStyle(color: Colors.black),
            textAlign: TextAlign.left,
          ),
        ],
      ),
    );
  }
}
class SInkWell extends StatefulWidget {
  final String Sstring;
  final String Sreturn;
  SInkWell({required this.Sstring, required this.Sreturn, Key? key}) : super(key: key);
  @override
  _SInkWell createState() => _SInkWell(Sstring:Sstring,Sreturn:Sreturn);
}

List pickerChildren = [
  "male",
  "female",
  "secret",
];

class _SInkWell extends State<SInkWell>{
  final String Sstring;
  final String Sreturn;
  List<Container> containerList = [];
  int _selectedValue = 0;

  int selectedValue = 0;
  String selectedGender = "male";
  _SInkWell({required this.Sstring, required this.Sreturn});
  @override
  Widget _buildGenderPicker() {
    return CupertinoPicker(
      itemExtent: 40,
      onSelectedItemChanged: (value) {
        print("Choose gender：${pickerChildren[value]}");
        print("$value");
        setState(() {
          selectedValue = value;
        });
      },
      children: pickerChildren.map((data) {
        return Text(data);
      }).toList(),
    );
  }
  Widget build(BuildContext context) {
    return InkWell(
      splashColor: Color(0x00000000),
      onTap: () async{await showDialog(
          context: context,
          builder: (BuildContext context) {
            return Center(
              child: Container(
                color: Colors.white,
                height: 250,
                child: Column(
                  children: <Widget>[
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        FlatButton(
                          color: Colors.white,
                          onPressed: () {
                            Navigator.pop(context);
                          },
                          child: Text("Cancle"),
                        ),
                        FlatButton(
                          color: Colors.white,
                          onPressed: () {
                            Navigator.pop(context);
                            setState(() {
                              selectedGender = pickerChildren[selectedValue];
                            });
                          },
                          child: Text("OK"),
                        ),
                      ],
                    ),
                    Expanded(
                      child: DefaultTextStyle(
                        style: TextStyle(
                          color: Colors.black,
                          fontSize: 22,
                        ),
                        child: _buildGenderPicker(),
                      ),
                    ),
                  ],
                ),
              ),
            );
          });
      Navigator.pop(context, Sreturn);
      },
      child:
      SizedBox(
        height: 42,
        width: MediaQuery.of(context).size.width,
        child:
        Container(
          padding: EdgeInsets.only(left: 26.0),
          alignment: Alignment.centerLeft,
          width: MediaQuery.of(context).size.width,
          decoration: new BoxDecoration(
            border: Border(
              bottom: BorderSide(width: 1.0, color: Color(0xFFE4E4E4)),
            ),
          ),
          child: Text(
            Sstring,
            style: TextStyle(color: Colors.black),
            textAlign: TextAlign.left,
          ),
        ),
      ),
    );
  }
}

class SportPage extends StatefulWidget {
  @override
  _SportPage createState() => _SportPage();
}

class _SportPage extends State<SportPage> {

  int ccc = 0;

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        leading: new IconButton(icon: Icon(Icons.arrow_back_ios,color: Colors.blue,), onPressed: ()=> Navigator.of(context).pop(),),
        backgroundColor: Color(0xFFF9F9F9),
        centerTitle: true,
        title: Text('SportData',style: TextStyle(color: Colors.black,fontSize: 20),),
      ),
      body:ListView(
        shrinkWrap: true,
        children: <Widget>[SContainer(SIcon: Icon3.bx_bx_walk,Sstring:"walk"),
          SInkWell(Sstring: sports[0],Sreturn: rsports[0],),
          SInkWell(Sstring: sports[1],Sreturn: rsports[1],),
          SContainer(SIcon: Icon2.stairs,Sstring:"climb"),
          SInkWell(Sstring: sports[2],Sreturn: rsports[2],),
          SInkWell(Sstring: sports[3],Sreturn: rsports[3],),
          SContainer(SIcon: Icon3.bx_bx_run,Sstring:"run"),
          SInkWell(Sstring: sports[4],Sreturn: rsports[4],),
          SInkWell(Sstring: sports[5],Sreturn: rsports[5],),
          SInkWell(Sstring: sports[6],Sreturn: rsports[6],),
          SContainer(SIcon: Icon3.cil_bike,Sstring:"bike"),
          SInkWell(Sstring: sports[7],Sreturn: rsports[7],),
          SInkWell(Sstring: sports[8],Sreturn: rsports[8],),
          SInkWell(Sstring: sports[9],Sreturn: rsports[9],),
          SContainer(SIcon: Icon3.house,Sstring:"housework"),
          SInkWell(Sstring: sports[10],Sreturn: rsports[10],),
          SInkWell(Sstring: sports[11],Sreturn: rsports[11],),
          SContainer(SIcon: Icon3.work,Sstring:"work"),
          SInkWell(Sstring: sports[12],Sreturn: rsports[12],),
          SInkWell(Sstring: sports[13],Sreturn: rsports[13],),
          SInkWell(Sstring: sports[14],Sreturn: rsports[14],),
          SContainer(SIcon: Icon3.exercise,Sstring:"other"),
          SInkWell(Sstring: sports[15],Sreturn: rsports[15],),
          SInkWell(Sstring: sports[16],Sreturn: rsports[16],),
          SInkWell(Sstring: sports[17],Sreturn: rsports[17],),
          SInkWell(Sstring: sports[18],Sreturn: rsports[18],),
          SInkWell(Sstring: sports[19],Sreturn: rsports[19],),
          SInkWell(Sstring: sports[20],Sreturn: rsports[20],),
          SInkWell(Sstring: sports[21],Sreturn: rsports[21],),
          SInkWell(Sstring: sports[22],Sreturn: rsports[22],),
          SInkWell(Sstring: sports[23],Sreturn: rsports[23],),
          SInkWell(Sstring: sports[24],Sreturn: rsports[24],),
          SInkWell(Sstring: sports[25],Sreturn: rsports[25],),
          SInkWell(Sstring: sports[26],Sreturn: rsports[26],),
          SInkWell(Sstring: sports[27],Sreturn: rsports[27],),
          SInkWell(Sstring: sports[28],Sreturn: rsports[28],),
          SInkWell(Sstring: sports[29],Sreturn: rsports[29],),
          SInkWell(Sstring: sports[30],Sreturn: rsports[30],),
          SInkWell(Sstring: sports[31],Sreturn: rsports[31],),
          SInkWell(Sstring: sports[32],Sreturn: rsports[32],),
          SInkWell(Sstring: sports[33],Sreturn: rsports[33],),
          SInkWell(Sstring: sports[34],Sreturn: rsports[34],),
        ],
      ),
    );
  }
}

Answer 1

您可能正在寻找CupertinoDatePicker

  Expanded(
    child: CupertinoDatePicker(
       initialDateTime: DateTime.now(),
       onDateTimeChanged: (value) {
 // do what you need to do with the selected time (value) here
       },
       mode: CupertinoDatePickerMode.time, // this can be selected to date if you need
     ),
   ),