文本按钮和描边按钮

本课属于 Coddy Flutter 学习旅程的“让应用具有交互性”单元。第 3 课，共 34 课。

Flutter 有三种按钮，它们的工作方式相同，都使用 onPressed: 和 child:。它们的视觉突出程度不同：

ElevatedButton：填充颜色。用于主要操作，例如保存。
OutlinedButton：只有边框，没有填充。用于次要选择，例如预览。
TextButton：只有文字。视觉上最不突出，适用于取消等操作。

OutlinedButton(onPressed: () {}, child: Text('Preview'))
TextButton(onPressed: () {}, child: Text('Cancel'))

一个屏幕上有一个醒目的按钮，周围还有一些不太突出的按钮，这样人们就知道应该先按哪个按钮。要更改按钮的类型，只需更改它的名称。

挑战

简单

这三个按钮都是 ElevatedButton。保持 Save 不变，将 Preview 设为 OutlinedButton，将 Cancel 设为 TextButton。

亲手试试

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(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              ElevatedButton(onPressed: () {}, child: Text('Save')),
              SizedBox(height: 12),
              ElevatedButton(onPressed: () {}, child: Text('Preview')),
              SizedBox(height: 12),
              ElevatedButton(onPressed: () {}, child: Text('Cancel')),
            ],
          ),
        ),
      ),
    );
  }
}