![](/img/trans.png)
[英]Scrolling in its own container in expanded widget flutter, How can i make it scroll through the whole page ? ( Flutter )
[英]Flutter: How do I disable scrolling for a GridView widget, but have scrolling enabled for the page as a whole?
我正在構建一個應用程序,其中有一個頁面,該頁面提供有關特定交易卡的信息。 我希望頁面是可滾動的,但我也希望在頁面上有一個網格,每個網格單元格顯示一個數據點。 我使用 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]
添加
physics: NeverScrollableScrollPhysics();<\/code>
在
GridView.count<\/code>中。
"
您可以在GridView
上提供physics: NeverScrollableScrollPhysics()
以禁用滾動效果。 如果您希望可滾動作為輔助小部件,請使用primary: false,
要使整頁可滾動,您可以使用body:SingleChildScrollView(..)
或更好地使用body:CustomScrollView(..)
試試這個:
class CardInfo extends StaefulWidget {
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: ListView(
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,
),
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,
),
)
],
),
),
),
],
),
],
),
),
),
);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.