网格视图生成器，在这一节中，我想扩大网格视图的高度为不同大小的手机高度增加和其他项目的高度保持固定的可用空间，但扩展的小部件不工作，使整个UI空白.
如何使网格视图随高度变化而扩展？我尝试了多种解决方案，但没有工作。
1.抽屉
- AppBar
1.正文-滑块、列表视图、网格视图
1.底部导航栏
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
drawer: DrawerMenu(),
appBar: PostHomeAppBar(appBar: AppBar()),
body: Stack(
children: [
Container(
height: double.infinity,
width: double.infinity,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("lib/assets/asset/bg-original (1).png"),
fit: BoxFit.cover)),
child: Column(
children: [
Column(
children: [
///slider
Container(
height: size.height * 0.25,
width: double.infinity,
child: MySlider(),
),
const SizedBox(
height: 5,
),
///list view builder
Container(
height: 55,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: _homePageController
.getGameCategorylist?.data?.length ??
0,
itemBuilder: (BuildContext context, int index) {
bool isSelected = _selectedTabIndex == index;
return Obx(
() => (_homePageController.isLoading.value)
? const Center(child: Loader())
: _homePageController
.getGameCategorylist!.data ==
null
? const Center(
child: Text(''),
)
: Padding(
padding: const EdgeInsets.only(
left: 2,
right: 2,
top: 4,
bottom: 8),
child: GestureDetector(
onTap: () {
_onTappedItem(index);
},
child: FittedBox(
child: Container(
padding: const EdgeInsets.only(
left: 10, right: 10),
decoration: BoxDecoration(
color: isSelected
? AppColors.golden
: null,
gradient: isSelected
? null
: const LinearGradient(
colors: [
Color(0xff1e1b53),
Color(0xff444185)
],
begin: Alignment
.topCenter,
end: Alignment
.bottomCenter,
),
borderRadius:
BorderRadius.circular(30),
),
child: Column(children: [
SizedBox(
height: size.height * 0.01,
),
Text(
_homePageController
.getGameCategorylist!
.data![index]
.lobbyCat
.toString(),
textAlign: TextAlign.center,
style: const TextStyle(
fontWeight:
FontWeight.w400,
color: Colors.white,
fontFamily: 'Roboto',
fontSize: 8),
),
Text(
'(${_homePageController.getGameCategorylist!.data![index].length.toString()})',
textAlign: TextAlign.center,
style: const TextStyle(
fontWeight:
FontWeight.w400,
color: Colors.white,
fontFamily: 'Roboto',
fontSize: 8),
),
SizedBox(
height: size.height * 0.005,
),
]),
),
),
),
),
);
}),
),
///grid view builder
Expanded(
child: GridView.builder(
padding: EdgeInsets.zero,
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 2,
mainAxisSpacing: 2,
mainAxisExtent: 120,
),
itemCount: casinoGameList?.data?.length ?? 0,
itemBuilder: (BuildContext context, int index) {
return Obx(() => (_homePageController.isLoading.value)
? const Center(child: Loader())
: casinoGameList?.data == null
? const Center(
child: Text(''),
)
: GestureDetector(
onTap: () {
final gameData =
casinoGameList?.data?[index];
Get.to(() =>
WebViewHome(gameData ?? Datum()));
},
child: Padding(
padding: const EdgeInsets.all(4.0),
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(10),
image: DecorationImage(
image: NetworkImage(base +
'${casinoGameList?.data?[index].imgSrc.toString()}'),
fit: BoxFit.cover,
),
),
),
),
));
},
),
),
],
),
],
),
),
if (_isLoading)
Padding(
padding: EdgeInsets.only(top: 200),
child: const Positioned.fill(
child: Loader(),
),
),
],
),
bottomNavigationBar: BottomNavigationBar(
backgroundColor: const Color(0xff140b36),
currentIndex: _currentIndex,
onTap: (int index) {
setState(() {
_currentIndex = index;
});
},
selectedItemColor: Colors.amber,
unselectedItemColor: Colors.grey,
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon: GestureDetector(
onTap: () {
Get.to(() => Home_Post_Login());
},
child: Image.asset('lib/assets/asset/icon_home_fill.png',
color: _currentIndex == 0 ? Colors.amber : Colors.white,
height: 20),
),
label: 'HOME',
),
BottomNavigationBarItem(
icon: GestureDetector(
onTap: () {
Get.to(() => Login_Screen());
},
child: Image.asset('lib/assets/asset/icon_games.png',
color: _currentIndex == 1 ? Colors.amber : Colors.white,
height: 20),
),
label: 'PROVIDERS',
),
BottomNavigationBarItem(
icon: GestureDetector(
onTap: () {
Get.to(() => WebViewHome(Datum(gameTypeUnified: 'game_shows')));
},
child: Image.asset('lib/assets/asset/icon_game_show.png',
color: _currentIndex == 2 ? Colors.amber : Colors.white,
height: 20),
),
label: 'GAME SHOWS',
),
BottomNavigationBarItem(
icon: GestureDetector(
onTap: () {
Get.to(() => Profile());
},
child: Image.asset('lib/assets/asset/icon_user.png',
color: _currentIndex == 3 ? Colors.amber : Colors.white,
height: 20),
),
label: 'MY ACCOUNT',
),
],
),
);
}字符串
3条答案
按热度按时间bsxbgnwa1#
我认为这个错误是因为你的gridView项目没有一个有界的高度，试着给予它们一个高度，看看它是否有效
up9lanfz2#
GridView使用
shrinkWrap: true属性，删除父控件Expanded。xkftehaa3#
我注意到你在这里不必要地使用了两列
字符串
看来Expanded在确定其大小时遇到了麻烦，因为内部列没有自己的大小。要解决此问题，您有两种选择：
1.如果不需要，可以删除其中一列。
1.或者，如果确实需要两列，也可以使用Expanded Package 内部列。