我正在开发一个应用程序,其中有一个页面提供有关特定交易卡的信息。我希望该页面可以滚动,但我还想在页面上放置一个网格,每个网格单元格显示一个数据点。我使用GridView.count()制作了网格。
我的问题是,页面的顶部一半保持静态,而网格可以滚动。如何使网格保持静态,而页面其余部分可滚动?我打算在此网格下方添加更多数据,并希望用户能够滚动查看所有内容,而网格成为页面的静态组件。
以下是我的代码:
我的问题是,页面的顶部一半保持静态,而网格可以滚动。如何使网格保持静态,而页面其余部分可滚动?我打算在此网格下方添加更多数据,并希望用户能够滚动查看所有内容,而网格成为页面的静态组件。
以下是我的代码:
import 'package:flutter/material.dart';
import 'package:pokehub/size_config.dart';
import 'package:pokemon_tcg/pokemon_tcg.dart';
class CardInfo extends StatefulWidget {
PokemonCard card;
CardInfo({required this.card});
@override
_CardInfoState createState() => _CardInfoState();
}
class _CardInfoState extends State<CardInfo> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
backgroundColor: Colors.grey[900],
appBar: AppBar(
title: Text(
"Card Profile",
style: TextStyle(
color: Colors.white,
fontFamily: 'Blinker',
fontSize: SizeConfig.blockSizeVertical * 3),
),
backgroundColor: Colors.red,
elevation: 0.0,
),
body: Align(
alignment: Alignment.center,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
height: SizeConfig.blockSizeVertical * 3,
),
Text(
"Set: " +
widget.card.set.name +
" // Number: " +
widget.card.number,
style: TextStyle(
color: Colors.white,
fontFamily: 'Blinker',
fontSize: SizeConfig.blockSizeVertical * 2),
),
SizedBox(
height: SizeConfig.blockSizeVertical * 3,
),
Hero(
tag: 'card' + widget.card.id,
child: Image.network(
widget.card.images.large,
height: SizeConfig.blockSizeVertical * 30,
),
),
SizedBox(
height: SizeConfig.blockSizeVertical * 2,
),
Text(
widget.card.name,
style: TextStyle(
color: Colors.white,
fontFamily: 'Blinker',
fontSize: SizeConfig.blockSizeVertical * 5,
),
),
SizedBox(
height: SizeConfig.blockSizeVertical * 2,
),
Expanded(
child: GridView.count(
mainAxisSpacing: SizeConfig.blockSizeVertical * 4,
crossAxisSpacing: SizeConfig.blockSizeHorizontal * 4,
crossAxisCount: 3,
children: [
Container(
padding: EdgeInsets.symmetric(
vertical: SizeConfig.blockSizeVertical * 2,
horizontal: SizeConfig.blockSizeHorizontal * 2),
decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Subtypes",
style: TextStyle(
color: Colors.white,
fontFamily: 'Blinker',
fontSize: SizeConfig.blockSizeVertical * 3,
fontWeight: FontWeight.bold),
),
Text(
widget.card.subtypes
.map((e) => e.type)
.join(", "),
style: TextStyle(
color: Colors.white,
fontFamily: 'Blinker',
fontSize: SizeConfig.blockSizeVertical * 2,
),
)
],
),
),
),
Container(
padding: EdgeInsets.symmetric(
vertical: SizeConfig.blockSizeVertical * 2,
horizontal: SizeConfig.blockSizeHorizontal * 2),
decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"HP",
style: TextStyle(
color: Colors.white,
fontFamily: 'Blinker',
fontSize: SizeConfig.blockSizeVertical * 3,
fontWeight: FontWeight.bold),
),
Text(
widget.card.hp!,
style: TextStyle(
color: Colors.white,
fontFamily: 'Blinker',
fontSize: SizeConfig.blockSizeVertical * 2,
),
)
],
),
),
),
Container(
padding: EdgeInsets.symmetric(
vertical: SizeConfig.blockSizeVertical * 2,
horizontal: SizeConfig.blockSizeHorizontal * 2),
decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Type",
style: TextStyle(
color: Colors.white,
fontFamily: 'Blinker',
fontSize: SizeConfig.blockSizeVertical * 3,
fontWeight: FontWeight.bold),
),
Text(
widget.card.types.map((e) => e.type).join(", "),
style: TextStyle(
color: Colors.white,
fontFamily: 'Blinker',
fontSize: SizeConfig.blockSizeVertical * 2,
),
)
],
),
),
),
Container(
padding: EdgeInsets.symmetric(
vertical: SizeConfig.blockSizeVertical * 2,
horizontal: SizeConfig.blockSizeHorizontal * 2),
decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Weakness",
style: TextStyle(
color: Colors.white,
fontFamily: 'Blinker',
fontSize: SizeConfig.blockSizeVertical * 3,
fontWeight: FontWeight.bold),
),
Text(
widget.card.weaknesses
.map((e) => e.type + e.value)
.join(", "),
style: TextStyle(
color: Colors.white,
fontFamily: 'Blinker',
fontSize: SizeConfig.blockSizeVertical * 2,
),
)
],
),
),
),
Container(
padding: EdgeInsets.symmetric(
vertical: SizeConfig.blockSizeVertical * 2,
horizontal: SizeConfig.blockSizeHorizontal * 2),
decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Resistance",
style: TextStyle(
color: Colors.white,
fontFamily: 'Blinker',
fontSize: SizeConfig.blockSizeVertical * 3,
fontWeight: FontWeight.bold),
),
Text(
widget.card.resistances
.map((e) =>
e.type == "" ? "None" : e.type + e.value)
.join(", "),
style: TextStyle(
color: Colors.white,
fontFamily: 'Blinker',
fontSize: SizeConfig.blockSizeVertical * 2,
),
)
],
),
),
),
Container(
padding: EdgeInsets.symmetric(
vertical: SizeConfig.blockSizeVertical * 2,
horizontal: SizeConfig.blockSizeHorizontal * 2),
decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Retreat Cost",
style: TextStyle(
color: Colors.white,
fontFamily: 'Blinker',
fontSize: SizeConfig.blockSizeVertical * 3,
fontWeight: FontWeight.bold),
),
Text(
widget.card.convertedRetreatCost.toString(),
style: TextStyle(
color: Colors.white,
fontFamily: 'Blinker',
fontSize: SizeConfig.blockSizeVertical * 2,
),
)
],
),
),
),
],
),
),
],
),
),
),
);
}
}
[enter image description here][1]