flutter的FractionallySizedBox组件示例

这段代码实现了一个Flutter应用的首页，其中使用FractionallySizedBox来创建一个占据屏幕一半宽度和高度的容器，并在其中垂直排列了文本、按钮、图标和图片等元素。容器带有黑色边框和圆角，以及蓝色背景。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Windows FractionallySizedBox Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Windows FractionallySizedBox Example'),
      ),
      body: Center(
        child: FractionallySizedBox(
          heightFactor: 0.5, // 设置高度比例为50%
          widthFactor: 0.5, // 设置宽度比例为50%
          child: Container(
            decoration: BoxDecoration(
              color: Colors.blue,
              border: Border.all(color: Colors.black, width: 2),
              borderRadius: BorderRadius.circular(10),
            ),
            padding: EdgeInsets.all(20),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'Hello, Flutter on Windows!',
                  style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
                SizedBox(
                    height: 20), // Adds some space between the text and button
                ElevatedButton(
                  onPressed: () {},
                  child: Text('Button'),
                ),
                SizedBox(
                    height: 20), // Adds some space between the button and icon
                Icon(Icons.home),
                SizedBox(
                    height: 20), // Adds some space between the icon and text
                Text(
                  'This is a simple fractionally sized box widget.',
                  style: TextStyle(
                    fontSize: 18,
                    color: Colors.grey,
                  ),
                ),
                SizedBox(
                    height: 20), // Adds some space between the text and image
                Image.network(
                  'https://picsum.photos/250?image=9',
                  width: 200,
                  height: 200,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

以下是对这段代码的分析：
一、整体结构
这段代码是一个使用 Flutter 框架构建的应用程序，主要展示了在 Windows 平台上如何使用FractionallySizedBox来按比例设置一个容器的大小，并在其中放置各种 UI 元素。

二、代码详细分析
导入部分
import ‘package:flutter/material.dart’;：导入了 Flutter 的 Material 设计库，以便使用其中的各种 UI 组件。

main函数
void main() { runApp(MyApp()); }：应用程序的入口点，调用runApp函数启动应用，并传入MyApp实例。

MyApp类
继承自StatelessWidget，表示这是一个无状态的组件。
build方法中返回一个MaterialApp，设置了应用的标题为 ‘Flutter Windows FractionallySizedBox Example’，主题颜色为蓝色，并指定了应用的首页为MyHomePage。

MyHomePage类
继承自StatelessWidget，也是无状态组件。
build方法：
返回一个Scaffold，构建了应用的基本布局结构。
appBar是一个应用栏，显示应用的标题。
body是一个居中的FractionallySizedBox：
heightFactor: 0.5设置高度比例为 50%。
widthFactor: 0.5设置宽度比例为 50%。
child是一个Container：
decoration属性设置了容器的背景颜色为蓝色，有一个黑色边框，宽度为 2，并且设置了圆角半径为 10。
padding属性设置了容器内部的填充为 20 像素。

child是一个Column布局：
包含一个文本，显示 “Hello, Flutter on Windows!”，字体大小为 24，加粗，颜色为白色。
多个SizedBox用于在不同的 UI 元素之间添加垂直间距。
一个ElevatedButton，按钮上显示 “Button”，点击时触发onPressed回调（当前为空）。
一个Icon(Icons.home)。
描述性的文本，字体大小为 18，颜色为灰色。
一个通过网络加载的图片，使用Image.network，指定了图片的 URL 和尺寸。

三、功能总结
这个应用程序在 Windows 平台上创建了一个界面，通过FractionallySizedBox按比例设置了一个容器的大小，使其占据其父容器的一半宽度和一半高度。在这个容器中，放置了文本、按钮、图标、图片等多种 UI 元素，展示了如何使用比例大小的容器进行布局设计。