【发布时间】: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