在宽屏幕上,我们展示一个等高的行,其中包含3个小部件。
在窄屏幕上,这三个小部件变成了一列,并占据整个宽度。
class CategorySelection extends StatelessWidget {
const CategorySelection({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
double screenWidth = MediaQuery.of(context).size.width;
double screenHeight = MediaQuery.of(context).size.height;
bool isScreenWide = MediaQuery.of(context).size.width >= 1200;
return MaxWidthContainer(
child: isScreenWide? IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: categoryList(isScreenWide,screenWidth,screenHeight),
),
): IntrinsicHeight(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: categoryList(isScreenWide,screenWidth,screenHeight),
),
),
);
}
}
List<Widget> categoryList(bool isScreenWide,double screenWidth,double screenHeight){
return [
const Widget1(),
isScreenWide? SizedBox(width: screenWidth * 0.03):SizedBox(height: screenHeight * 0.03),
const Widget1(),
isScreenWide? SizedBox(width: screenWidth * 0.03):SizedBox(height: screenHeight * 0.03),
const Widget1(),
];
}