Flutter基础（前端教程①-容器和控件位置）

1. 一个红色背景的 Container
2. 垂直排列的 Column 布局
3. 中央的 ElevatedButton
4. 按钮下方的白色文本

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: const Text('Flutter Container Demo')),body: Center(child: Container(width: 300,height: 200,decoration: const BoxDecoration(color: Colors.red, // 设置背景为红色),child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [ElevatedButton(onPressed: () {},child: const Text('点击按钮'),),const SizedBox(height: 20), // 按钮和文字之间的间距const Text('按钮下方的文字',style: TextStyle(color: Colors.white),),],),),),),);}
}

在 Flutter 中，Column是一个垂直方向排列子组件的布局控件，而mainAxisAlignment: MainAxisAlignment.center用于设置子组件在 Column垂直方向上的对齐方式。

属性值	子组件排列效果
start	顶部对齐（默认值）
center	居中对齐
end	底部对齐

Column(mainAxisAlignment: MainAxisAlignment.center, // 垂直居中对齐children: [Text('第一个子组件'),Text('第二个子组件'),Text('第三个子组件'),],
)

示例

// MainAxisAlignment.start（默认）
+----------------+
| Text1          |
| Text2          |
| Text3          |
+----------------+// MainAxisAlignment.center
+----------------+
|                |
|    Text1       |
|    Text2       |
|    Text3       |
|                |
+----------------+// MainAxisAlignment.end
+----------------+
|                |
|                |
| Text1          |
| Text2          |
| Text3          |
+----------------+

实现了容器位置调整和背景图片设置的功能：

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: const Text('Flutter Container Demo')),body: Container(// 设置背景图片decoration: const BoxDecoration(image: DecorationImage(image: NetworkImage('https://picsum.photos/1920/1080'), // 示例背景图fit: BoxFit.cover,),),child: Center(child: FractionallySizedBox(widthFactor: 0.8, // 容器宽度为屏幕宽度的80%child: Container(height: 200,margin: const EdgeInsets.only(top: 100), // 调整容器位置（向下偏移100像素）decoration: const BoxDecoration(color: Colors.red,borderRadius: BorderRadius.all(Radius.circular(12)), // 圆角效果),child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [ElevatedButton(onPressed: () {},child: const Text('点击按钮'),),const SizedBox(height: 20),const Text('按钮下方的文字',style: TextStyle(color: Colors.white),),],),),),),),),);}
}

• Container(width: 300)：固定宽度（300 像素），在不同屏幕尺寸上可能显示异常（比如在小屏手机上溢出）。
• FractionallySizedBox(widthFactor: 0.8)：动态宽度（永远是父组件宽度的 80%），自动适配不同屏幕。

使用 Container（固定宽度）

Container(width: 300, // 无论屏幕多大，宽度永远是300像素height: 200,color: Colors.red,
)

使用 FractionallySizedBox（相对宽度）

FractionallySizedBox(widthFactor: 0.8, // 宽度是父组件宽度的80%child: Container(height: 200,color: Colors.red,),
)