【问题标题】:How to implement multiple nested navigation in listview?如何在listview中实现多个嵌套导航?
【发布时间】:2022-07-12 00:01:13
【问题描述】:

所以基本上我必须实现一个包含某些主题的列表,其中每个主题都有一个要在不同页面上实现的子主题列表,并且每个子主题在单击时会显示其各自的显示页面。现在主题和子主题列表是巨大的......那么有没有更简单的方法来实现这个导航系统,而不是为所有内容创建一个新页面?这是我创建的主题列表的代码,它从 json 格式获取数据。


Expanded(
                      child: ListView.builder(
// scrollDirection: Axis.horizontal,
                          itemCount: cryptoData.length,
                          itemBuilder: (context, index) {
                            return Container(
                              padding: EdgeInsets.fromLTRB(20, 10, 16, 0),
                              height: 100,
                              width: double.maxFinite,
                              child: Card(
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(10),
                                ),
                                elevation: 5,
                                child: Container(
                                  
                                  child: Padding(
                                    padding: EdgeInsets.all(7),
                                    child: Stack(children: <Widget>[
                                      Align(
                                        alignment: Alignment.centerRight,
                                        child: Stack(
                                          children: <Widget>[
                                            Padding(
                                                padding: const EdgeInsets.only(
                                                    left: 5, top: 5),
                                                child: Column(
                                                  children: <Widget>[
                                                    Row(
                                                      children: <Widget>[
                                                        cryptoIcon(
                                                            cryptoData[index]),
                                                        SizedBox(
                                                          height: 10,
                                                        ),
                                                        // Spacer(),
                                                        cryptoChange(
                                                            cryptoData[index]),
                                                        SizedBox(
                                                          width: 10,
                                                        ),
                                                        SizedBox(
                                                          width: 20,
                                                        )
                                                      ],
                                                    ),
                                                  ],
                                                ))
                                          ],
                                        ),
                                      )
                                    ]),
                                  ),
                                ),
                              ),
                            );
                          }),
                    ),

这是json格式


import 'package:flutter/material.dart';

class CryptoData {
  static final getData = [
    {
      'image': "assets/images/card1.png",
      'change': 'English',
      'changeValue': '24 Chapters',
    },
    {
      'image': "assets/images/card1.png",
      'change': 'Moral Education',
      'changeValue': '32 Chapters',
    },
    {
      'image': "assets/images/card1.png",
      'change': 'Maths',
      'changeValue': '11 Chapters',
    },
    {
      'image': "assets/images/card1.png",
      'change': 'Hindi',
      'changeValue': '22 Chapters',
    },
    {
      'image': "assets/images/card1.png",
      'change': 'Computer Science',
      'changeValue': '10 Chapters',
    },
    {
      'image': "assets/images/card1.png",
      'change': 'Sanskrit',
      'changeValue': '103 Cards',
    },
    {
      'image': "assets/images/card1.png",
      'change': 'Social Studies',
      'changeValue': '12 Chapters',
    },
  ];
}

【问题讨论】:

    标签: flutter listview routes navigation flutter-layout


    【解决方案1】:

    如果您有大量数据,最好使用ListView.builder 小部件实现不同的页面。

    【讨论】:

      猜你喜欢
      • 2017-12-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-01-25
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多