Question

如何使用列表导航？
我的清单

class myHome extends StatelessWidget {
 List<paralies> beaches = [
 paralies(title: "Afandou Beach", photos: "rv_afandou_a.jpg", intent: "b_afandou"),
 paralies(title: "Agathi Beach", photos: "b_afandou_b.jpg", intent: "b_agathi")
];

paralies.dart

 class paralies {
  String title; // Name
  String photos; // Photos
  String intent; // Pages

  paralies({ this.title,this.photos,this.intent});



  }

我的onTap

SliverList(
          delegate: SliverChildBuilderDelegate(
                (context, index) => GestureDetector(onTap:(){
                  Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context){return beaches[index].intent;})
                  ); //Material
                }, //onTap

完整代码：

class myHome extends StatelessWidget {
 List<paralies> beaches = [
 paralies(title: "Afandou Beach", photos: "rv_afandou_a.jpg", intent: "b_afandou"),
 paralies(title: "Agathi Beach", photos: "b_afandou_b.jpg", intent: "b_agathi")
];


@override
Widget build(BuildContext context) {
return SafeArea(
  child: Material(
    child: CustomScrollView(
      slivers: [
        SliverPersistentHeader(
          delegate: MySliverAppBar(expandedHeight: 200),
          pinned: true,
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate(
                (context, index) => GestureDetector(onTap:(){
                  Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context){return beaches[index].intent;})
                  ); //Material
                }, //onTap


                    child: Card(
                   child: Padding(

                    padding: const EdgeInsets.fromLTRB(15.0,0,15.0,0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[

                       Image.asset("assets/beaches/${beaches[index].photos}", width: 100.0,height: 
                                  100.0,),
                        SizedBox(width: 70.0),
                        Text(beaches[index].title,
                        style: TextStyle(
                          color: Colors.blue,
                          fontWeight: FontWeight.w800,
                          fontSize: 20,
                      ), //TextStyle
                     ), //Text
                    ], //<Widget>[]
                   ), //Row
                  ), //Padding
                 ), //Card
                ), //GestureDetector

            childCount: beaches.length,

           ), //SliverChildBuilderDelegate
          ), //SliverList
        ], //Slivers
      ), //Custom ScrollView

    ), //Material
  ); //Safe Area
 } //build
} //MyHome

Answer 1

SliverList(
          delegate: SliverChildBuilderDelegate(
                (context, index) => GestureDetector(onTap:(){
                  Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context){return beaches[index].intent;})
                  ); //Material
                }, /

据我了解，您正在尝试使用列表的特定索引进行导航，您应该执行的操作如下：

Widget _intentToPage(String intent){
  if(intent == "b_afandou"){
    return B_AFANDOU_PAGE();
  }
  else if(intent == ...){
    ...
  }
  return Text("Page not found");
}


SliverList(
  delegate: SliverChildBuilderDelegate(
    (context, index) => GestureDetector(onTap:(){
      Navigator.push(context, MaterialPageRoute(builder: (context) => _intentToPage(beaches[index].intent));
    },

B_AFANDOU_PAGE()是该意图的特定页面的指针。

注意：代码未经测试，但我相信这种方法应该为您提供解决该问题的基本思路。

如何在Flutter中使用GestureDetector和SliverList进行导航

1 个答案: