英文:
I wanna display 6 squares in one container (height of the container is 1/3 of the screen) like the given image How to do?
问题
我想在一个容器中以固定大小显示6个正方形（容器的高度是屏幕的1/3），就像给定的图像一样。我已经得到了它，但当我运行多个模拟器时，正方形变成了矩形。我想要在一个固定大小的容器中精确显示6个正方形，如何做到并且如何使其响应式？
我想要像给定的图像一样显示（响应式）。
英文:
I want to display 6 squares in fixed size of a container (height of the container is 1/3 of the screen) like the given image I got it but its not responsive when I run multiple emulator the square changed to rectangle I want exact 6 squares in a fixed size of container how to do and how to make responsive?
I want to display like the given image(responsive)
答案1
得分: 0
你可以使用以下代码：
你的代码可能会溢出，因为你可能在使用填充。
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(useMaterial3: true),
home: Scaffold(
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container_(),
Container_(),
Container_(),
],
),
Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
Container_(),
Container_(),
Container_(),
])
]),
)),
);
}
}
class Container_ extends StatelessWidget {
const Container_({super.key});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(3.0),
child: Container(
width: MediaQuery.of(context).size.width / 3 - 18,
height: MediaQuery.of(context).size.width / 3 - 18,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12), color: Colors.indigo),
),
);
}
}
你还提供了一个图片链接，但我无法直接显示图片。
英文:
you can use the following code:<br>
you're code will overflow because you may be using padding
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(useMaterial3: true),
home: Scaffold(
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container_(),
Container_(),
Container_(),
],
),
Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
Container_(),
Container_(),
Container_(),
])
]),
)),
);
}
}
class Container_ extends StatelessWidget {
const Container_({super.key});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(3.0),
child: Container(
width: MediaQuery.of(context).size.width / 3 - 18,
height: MediaQuery.of(context).size.width / 3 - 18,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12), color: Colors.indigo),
),
);
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论