初探Flutter构建之道：控件与布局的奥秘（一）

2023-09-13 00:22:23

Flutter控件：构建交互式应用程序的基础

在Flutter的世界中，控件是构建应用程序的基础元素。它们是可视化组件，允许您创建各种用户界面元素，从简单的文本标签到复杂的交互式布局。掌握控件的使用方法至关重要，它可以帮助您设计出美观且用户友好的应用程序。

文本与图片：基础控件

文本和图片是Flutter应用程序中经常用到的控件。

文本控件： 使用Text类显示文本信息。您可以自定义字体、颜色、大小等属性来调整文本的外观。

Text(
  'Hello, world!',
  style: TextStyle(
    fontSize: 20,
    color: Colors.blue,
  ),
)

图片控件： 使用Image类显示图片。您可以加载本地或网络图片，并设置大小、对齐方式等属性。

Image.asset(
  'assets/images/logo.png',
  width: 200,
  height: 200,
  alignment: Alignment.center,
)

线性容器：排列子控件

线性容器用于排列子控件，包括水平容器（Row）、垂直容器（Column）和表格容器（Table）。

水平容器： 将子控件水平排列，使用Row类。

Row(
  children: [
    Text('Hello, world!'),
    Image.asset('assets/images/logo.png'),
  ],
)

垂直容器： 将子控件垂直排列，使用Column类。

Column(
  children: [
    Text('Hello, world!'),
    Image.asset('assets/images/logo.png'),
  ],
)

表格容器： 将子控件排列成表格形式，使用Table类。

Table(
  border: TableBorder.all(),
  children: [
    TableRow(
      children: [
        Text('1'),
        Text('2'),
        Text('3'),
      ],
    ),
    TableRow(
      children: [
        Text('4'),
        Text('5'),
        Text('6'),
      ],
    ),
  ],
)

示例：构建一个简单应用程序

使用这些基础控件，您可以构建一个简单的应用程序。例如，创建一个显示“你好，世界！”文本和Flutter徽标的应用程序：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Hello, world!',
                style: TextStyle(
                  fontSize: 30,
                  fontWeight: FontWeight.bold,
                ),
              ),
              SizedBox(height: 20),
              Image.asset(
                'assets/images/flutter_logo.png',
                width: 200,
                height: 200,
              ),
            ],
          ),
        ),
      ),
    );
  }
}