大家好，我有一个gridview.builder，在某些屏幕尺寸上看起来不错，但在某些屏幕尺寸上也溢出。请帮助我想我迷路了。我很糟糕的响应式设计哈哈，所以我需要一些帮助来解释我哪里出错了。下面是代码：
GridView.builder(
shrinkWrap: true,
physics: const ScrollPhysics(),
itemCount: searchList.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 8,
mainAxisSpacing: 16,
mainAxisExtent:
deviceH < 827 ? deviceH / 3.1 : deviceH / 4.1,
),
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.only(
left: 8, right: 8, bottom: 8),
child: Material(
elevation: 8,
borderRadius: BorderRadius.circular(8),
child: Container(
height:
deviceH < 827 ? deviceH / 3.9 : deviceH / 4.1,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(
height: 2,
),
Padding(
padding: const EdgeInsets.all(8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: AspectRatio(
aspectRatio: 16 / 9,
child: Image.asset(
fit: BoxFit.cover,
//height: 85,
width: double.infinity,
searchList[index].image,
),
),
),
),
const SizedBox(height: 3),
Padding(
padding: const EdgeInsets.only(left: 8),
child: Text(
searchList[index].header,
textAlign: TextAlign.left,
style: const TextStyle(
fontFamily: AppStrings.fontName,
fontSize: 13,
color: Color(0xff171717),
fontWeight: FontWeight.w500,
),
),
),
Padding(
padding: const EdgeInsets.only(
top: 1, left: 8, right: 3),
child: Text(
searchList[index].text,
style: const TextStyle(
fontSize: 10,
fontFamily: AppStrings.fontName,
fontWeight: FontWeight.w200,
),
),
),
GestureDetector(
onTap: () async {
},
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(
bottom: 8.0,
right: 8.0,
left: 8.0),
child: Container(
margin:
const EdgeInsets.only(top: 6),
height: 25,
width: 162,
decoration: BoxDecoration(
color: AppColors.white,
borderRadius:
BorderRadius.circular(8),
border: Border.all(
color: Colors.blue,
width: 1,
),
),
child: const Center(
child: Text(
'View group',
style: TextStyle(
fontSize: 12,
color: AppColors.blue,
fontFamily:
AppStrings.fontName),
),
),
),
),
],
),
),
],
),
),
),
);
}));我想为卡看起来在所有屏幕尺寸相同。
1条答案
按热度按时间omqzjyyz1#
要使
GridView.builder在Flutter中响应，您可以使用多种技术的组合，包括根据屏幕宽度设置列数和处理屏幕方向更改。以下是一个分步指南：1.计算列数：
根据屏幕宽度确定
GridView中需要多少列。您可以使用MediaQuery类获取屏幕宽度并计算列数。例如，可以设置最小列宽并计算列数，如下所示：1.将
GridView.builder与动态crossAxisCount配合使用：在小部件树中，使用
GridView.builder小部件，并将crossAxisCount属性设置为从步骤1计算出的值。您还可以调整其他属性，如mainAxisSpacing和crossAxisSpacing，以控制网格项目之间的间距。1.处理屏幕方向更改（可选）：
如果您想处理屏幕方向的更改，可以将
GridView.builderPackage 在LayoutBuilder小部件中。这允许您在屏幕方向更改时重新计算crossAxisCount。下面是一个示例：通过使用这种方法，您的
GridView.builder将根据屏幕宽度动态调整其列数，使其能够响应不同的屏幕大小和方向。您可以调整minWidth值和间距特性，以满足特定的设计要求。