如何在 Flutter 中向 Cupertino Segmented Control 添加网格

Question

I was referring to this link on Git Hub and I'm trying to add a grid to the segment.

My objective is to add images in a grid view to a segment in Cupertino Segmented Control

Answer 1

return Scaffold(
        appBar: CupertinoNavigationBar(
          middle: Text("awrdfsfsdfs"),
          automaticallyImplyLeading: true,
          transitionBetweenRoutes: true,
          previousPageTitle: AppLocalizations.of(context).tr('alerts.back'),
        ), 
  body: Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    Expanded(
      child: ListView(
        shrinkWrap: true,
        scrollDirection: Axis.vertical,
        padding: EdgeInsets.only(top: 20),
        children: <Widget>[
          CupertinoSegmentedControl(
            children: {
              0: Text(AppLocalizations.of(context).tr('titles.secImg')),
              1: Text(AppLocalizations.of(context).tr('titles.secQuest')),
            },
            groupValue: _selectedIndexValue,
            onValueChanged: (value) {
              setState(() => _selectedIndexValue = value);
            },
          ),

          _selectedIndexValue == 0 ? IosFirstPage() : IosSecondPage()
        ],
      ),
    )
  ],
),
);
 }
}

class IosFirstPage extends StatelessWidget {
  const IosFirstPage({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    var imgList = [ ];
    return Flex(
    direction: Axis.vertical,
  children: <Widget>[
    Container(
      padding: EdgeInsets.only(top: 10,left: 10),
      child: Row(
        children: <Widget>[
          Text(AppLocalizations.of(context).tr('titles.selectSecImg'),style: textTheme.subtitle,textAlign: TextAlign.left,textScaleFactor: 1.2,),

        ],
      )
    ),
    Container(
      width: MediaQuery
          .of(context)
          .size
          .width,
      height: MediaQuery.of(context).size.height*0.64, //adjust this resize the scroll view of the images
      margin: EdgeInsets.only(top: 10,left: 10,right: 10),
      color: Colors.white30,
      child: GridView.builder(
        itemCount: imgList.length,
        gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 5),
        itemBuilder: (BuildContext context, int index) {
          return new GestureDetector(
            child: new Card(
              elevation: 1.0,
              child: new Container(
                  alignment: Alignment.center,
                  margin: new EdgeInsets.only(
                      top: 10.0, bottom: 10.0),
                  child: new Image.asset(imgList[index], scale: 0.5,)
              ),
            ),
            onTap: () {
              print(index);
              /*showDialog(
              barrierDismissible: false,
              context: context,
              child: new CupertinoAlertDialog(
                title: new Column(
                  children: <Widget>[
                    new Text("GridView"),
                    new Icon(
                      Icons.favorite,
                      color: Colors.red,
                    ),
                  ],
                ),
                content: new Text( imgList[index]),
                actions: <Widget>[
                  new FlatButton(
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      child: new Text("OK"))
                ],
              ));*/
            },
          );
        },
      ),
    ),

  ],

);
 }
}

class IosSecondPage extends StatelessWidget {
const IosSecondPage({Key key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Container();.
 }
}