Android端Flutter开发中iOS风格选择器的实现问题排查

• 基于自定义类封装了InkWell交互组件，尝试在Android端实现iOS风格的滚轮选择器
• 对照UI参考图展示的滚轮选择效果开发时，调用CupertinoPicker()、CupertinoDatePicker()组件功能运行异常，无法复现目标滚轮选择效果，暂未定位到代码问题。

• 选择器选项列表定义：

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

• 初步实现的CupertinoPicker组件代码（存在语法截断问题）：

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],),
        ],
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Stanley Lee