Flutter线性布局的正确打开方式

Android

2023-12-26 16:22:32

认识Flutter的布局系统

Flutter 采用了一种与传统 Android 或 iOS 不同的布局系统。在 Flutter 中，布局是通过一系列嵌套的组件来实现的，这些组件被称为“小部件”。每个小部件都有自己的布局规则，并且可以与其他小部件组合形成更复杂的布局。

Flutter中的线性布局

线性布局是 Flutter 中最常用的布局之一。它允许你将小部件水平或垂直地排列在一起。你可以通过使用 Row 或 Column 小部件来创建线性布局。

Row 小部件用于水平排列小部件。
Column 小部件用于垂直排列小部件。

创建一个简单的线性布局

让我们创建一个简单的线性布局来演示如何使用 Row 和 Column 小部件。

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(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Text('Hello'),
                  Text('World'),
                ],
              ),
              Row(
                children: <Widget>[
                  Text('Flutter'),
                  Text('Development'),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这段代码创建一个 Column 小部件，其中包含两个 Row 小部件。第一个 Row 小部件包含两个 Text 小部件，分别显示“Hello”和“World”。第二个 Row 小部件包含两个 Text 小部件，分别显示“Flutter”和“Development”。

自定义线性布局

你可以通过设置 Row 和 Column 小部件的属性来自定义线性布局。例如，你可以设置 Row 小部件的 mainAxisAlignment 属性来控制小部件在行中的对齐方式。你还可以设置 Column 小部件的 crossAxisAlignment 属性来控制小部件在列中的对齐方式。

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(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('Hello'),
                  Text('World'),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('Flutter'),
                  Text('Development'),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}