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垂直方向上的對齊方式。

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,),
)