Flutter 第 5 天：布局实例 + 操作交互

写在前面

Flutter 第 5 天，我们继续深入探索布局实例和操作交互。首先，我们从入门级布局实例开始，剖析出题、思路和解题过程，帮助您理解布局的基础知识。接着，我们进入进阶版布局，领略 Flutter 布局的强大功能。最后，我们将重点关注操作交互的实现，带您领略 Flutter 交互设计的魅力。

一、入门级布局 1

1. 出题

这是一个常见的布局问题：在一个容器中，需要放置三个子控件，它们分别是文本控件、按钮控件和图像控件。要求三个子控件水平排列，文本控件位于最左边，按钮控件位于中间，图像控件位于最右边。

2. 思路

解决这个问题，我们需要使用 Row 控件来实现水平排列。Row 控件是一个水平方向的线性布局控件，它可以将子控件水平排列在一起。

3. 解题

Row(
  children: [
    Text('文本'),
    ElevatedButton(
      onPressed: () {},
      child: Text('按钮'),
    ),
    Image.network('https://example.com/image.png'),
  ],
);

二、入门级布局 2

在这个例子中，我们将使用 Column 控件来实现垂直排列。Column 控件是一个垂直方向的线性布局控件，它可以将子控件垂直排列在一起。

Column(
  children: [
    Text('文本 1'),
    Text('文本 2'),
    Text('文本 3'),
  ],
);

[番外]：小封装 1---添加测试

小封装 1：添加测试

import 'package:flutter_test/flutter_test.dart';
import 'package:my_app/main.dart';

void main() {
  testWidgets('MyWidget has a title and message', (WidgetTester tester) async {
    // Build our app and trigger a frame.
    await tester.pumpWidget(MyApp());

    // Verify that our title and message are displayed.
    expect(find.text('My Widget'), findsOneWidget);
    expect(find.text('Hello World!'), findsOneWidget);
  });
}

三、操作交互

操作交互是 Flutter 的一大亮点。Flutter 提供了丰富的交互控件，如按钮、文本输入框、滑块等。这些控件可以实现各种各样的交互操作，如点击、滑动、拖拽等。

1. 按钮

按钮是 Flutter 中最常用的交互控件之一。按钮可以实现各种各样的操作，如提交表单、打开新页面、播放音乐等。

ElevatedButton(
  onPressed: () {
    // 执行操作
  },
  child: Text('按钮'),
);

2. 文本输入框

文本输入框允许用户输入文本。文本输入框可以实现各种各样的功能，如填写表单、搜索内容、发表评论等。

TextField(
  decoration: InputDecoration(
    labelText: '姓名',
  ),
);

3. 滑块

滑块允许用户选择一个值。滑块可以实现各种各样的功能，如调整音量、亮度、进度等。

Slider(
  value: 0.5,
  onChanged: (newValue) {
    // 执行操作
  },
);

结语

Flutter 的布局和操作交互非常强大，可以帮助您轻松构建出美观且易用的界面。希望今天的分享对您有所帮助，也欢迎您在评论区分享您的经验和心得。