Flutter Mobile Development · 课时

基础布局组件

掌握 Row、Column、Container 和 Stack 等基础布局组件，创建结构清晰且响应式的用户界面。

基础布局组件 是 CoddyKit 上的免费 Flutter Mobile Development 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Flutter Mobile Development 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Flutter Mobile Development 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

Why Layouts Matter

In Flutter, everything is a widget! To build complex and beautiful user interfaces, you need to arrange these widgets on the screen.

Layout widgets are special widgets designed to help you organize other widgets, defining their size, position, and how they interact with each other.

Meet the Container

The Container widget is one of the most versatile layout widgets. Think of it as a customizable box that can hold a single child widget.

You can use it to:

Add padding or margins
Set background colors or decorations
Define specific width and height
Transform its position or rotation

Simple Colored Box

Let's create a basic Container with a child Text widget. Notice how we set its color and padding.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Container Demo')),
        body: Center(
          child: Container(
            padding: const EdgeInsets.all(20.0),
            color: Colors.blueAccent,
            child: const Text(
              'Hello from Container!',
              style: TextStyle(color: Colors.white, fontSize: 18),
            ),
          ),
        ),
      ),
    );
  }
}

Horizontal with Row

When you need to arrange multiple widgets side-by-side horizontally, the Row widget is your go-to. It takes a list of widgets as its children.

Row automatically tries to fit its children along the horizontal axis, and you can control their alignment within the row.

Row of Buttons

Here's how you can place three buttons next to each other using a Row. We'll add some spacing between them.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Row Demo')),
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              ElevatedButton(onPressed: () {}, child: const Text('Button 1')),
              ElevatedButton(onPressed: () {}, child: const Text('Button 2')),
              ElevatedButton(onPressed: () {}, child: const Text('Button 3')),
            ],
          ),
        ),
      ),
    );
  }
}

Vertical with Column

Just as Row arranges widgets horizontally, the Column widget arranges them vertically, one below the other.

It also takes a list of children and lets you control their vertical alignment.

Stacked Text Fields

Let's create a simple login-like form using a Column to stack two TextFields and a button vertically.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Column Demo')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Padding(
                padding: EdgeInsets.all(8.0),
                child: TextField(
                  decoration: InputDecoration(labelText: 'Username'),
                ),
              ),
              const Padding(
                padding: EdgeInsets.all(8.0),
                child: TextField(
                  obscureText: true,
                  decoration: InputDecoration(labelText: 'Password'),
                ),
              ),
              ElevatedButton(onPressed: () {}, child: const Text('Login')),
            ],
          ),
        ),
      ),
    );
  }
}

Aligning Children

Both Row and Column use two important properties for alignment:

mainAxisAlignment: How children are positioned along the primary axis (horizontal for Row, vertical for Column). Examples: start, center, end, spaceAround.
crossAxisAlignment: How children are positioned along the perpendicular axis (vertical for Row, horizontal for Column). Examples: start, center, end, stretch.

These give you fine control over your layouts!

Overlapping with Stack

Sometimes you need to place widgets on top of each other, like text over an image. That's where the Stack widget comes in.

Stack allows you to layer multiple children widgets. You can control their exact position within the stack using the Positioned widget.

Image with Text Overlay

Let's put some text directly on top of an image using a Stack. We'll use Positioned to place the text precisely.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Stack Demo')),
        body: Center(
          child: SizedBox(
            width: 300,
            height: 200,
            child: Stack(
              children: <Widget>[
                Image.network(
                  'https://picsum.photos/300/200',
                  fit: BoxFit.cover,
                ),
                const Positioned(
                  bottom: 10,
                  left: 10,
                  child: Text(
                    'Beautiful Scenery',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      shadows: [
                        Shadow(blurRadius: 5, color: Colors.black)
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Layout Challenge

Which of the following widgets are primarily used for arranging multiple children widgets in a single direction (either horizontally or vertically)?

Layouts Mastered!

Great job! You've now mastered the fundamental layout widgets in Flutter:

Container: A versatile box for single children, offering padding, margin, color, and size control.
Row: Arranges multiple children horizontally.
Column: Arranges multiple children vertically.
Stack: Layers children on top of each other, often used with Positioned.

Understanding these is key to building any Flutter UI!

常见问题解答

「基础布局组件」课时是免费的吗？

是的 — 「基础布局组件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Flutter Mobile Development 课程的其余内容，请升级到 CoddyKit PRO。 Flutter Mobile Development 课程共包含 4 节课。

「基础布局组件」这节课中我会学到什么？

掌握 Row、Column、Container 和 Stack 等基础布局组件，创建结构清晰且响应式的用户界面。你通过在浏览器中直接运行的动手代码来练习 Flutter Mobile Development，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Flutter Mobile Development 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Flutter Mobile Development 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「基础布局组件」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Flutter Mobile Development 课中编写并运行代码吗？

能。每节 Flutter Mobile Development 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Flutter Mobile Development