Flutter学习指南：UI布局和控件，瞬间高大上了

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  // 这个widget就是整个应用的根widget
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(), // 设置应用的首页
    );
  }
}
 
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 使用Scaffold创建一个有Material Design风格的应用页面
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter 学习指南'), // 设置标题
      ),
      body: Center(
        child: Column( // 垂直布局
          mainAxisAlignment: MainAxisAlignment.center, // 垂直居中
          children: <Widget>[
            Text(
              'Flutter',
              style: TextStyle(
                fontSize: 30.0, // 字体大小
                color: Colors.red, // 字体颜色
                fontWeight: FontWeight.bold, // 字体加粗
              ),
            ),
            SizedBox(height: 20.0), // 空间间隔
            Text(
              '瞬间高大上',
              style: TextStyle(
                fontSize: 20.0,
                color: Colors.blue,
                fontStyle: FontStyle.italic, // 字体倾斜
              ),
            ),
          ],
        ),
      ),
    );
  }
}

这段代码使用了Flutter的Material组件创建了一个简单的应用，其中包含一个带有标题的应用栏，一段居中的文本，以及一个文本标题和子标题的列表。通过这个例子，开发者可以了解到Flutter中UI布局和控件的基本使用方法。