Bar*_*aad 3 row image dart kotlin flutter
我有一个小项目,将 9 个图像放入列/行表中,并出现抖动,问题是图像显示在屏幕之外
我希望它是这样的:
这是代码
return MaterialApp(
home: SafeArea(
child: Scaffold(
backgroundColor: Colors.tealAccent,
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset('images/1.png', fit: BoxFit.fill),
Image.asset('images/2.png', fit: BoxFit.fill),
Image.asset('images/3.png', fit: BoxFit.fill),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset('images/4.png', fit: BoxFit.fill),
Image.asset('images/5.png', fit: BoxFit.fill),
Image.asset('images/6.png', fit: BoxFit.fill),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset('images/7.png', fit: BoxFit.fill),
Image.asset('images/8.png', fit: BoxFit.fill),
Image.asset('images/9.png', fit: BoxFit.fill),
],
),
],
)),
),
);
Run Code Online (Sandbox Code Playgroud)
这是结果:
Try using Expanded widget-
return MaterialApp(
home: SafeArea(
child: Scaffold(
backgroundColor: Colors.tealAccent,
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(child:Image.asset('images/1.png',fit: BoxFit.fill), flex:1),
Expanded(child:Image.asset('images/2.png',fit: BoxFit.fill), flex:1),
Expanded(child:Image.asset('images/3.png',fit: BoxFit.fill), flex:1),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(child:Image.asset('images/4.png',fit: BoxFit.fill), flex:1),
Expanded(child:Image.asset('images/5.png',fit: BoxFit.fill), flex:1),
Expanded(child:Image.asset('images/6.png',fit: BoxFit.fill), flex:1),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(child:Image.asset('images/7.png',fit: BoxFit.fill), flex:1),
Expanded(child:Image.asset('images/8.png',fit: BoxFit.fill), flex:1),
Expanded(child:Image.asset('images/9.png',fit: BoxFit.fill), flex:1),
],
),
],
)),
),
);
Run Code Online (Sandbox Code Playgroud)
Let me know if it works...
| 归档时间: |
|
| 查看次数: |
4025 次 |
| 最近记录: |