Flutter基建 - 按钮全解析

在Flutter中，按钮是一种常见的UI元素，用于响应用户点击。Flutter提供了多种按钮组件，例如FlatButton、RaisedButton、OutlineButton、IconButton和ButtonBar等。以下是一些使用这些按钮组件的示例代码：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Buttons Demo'),
        ),
        body: ButtonColumn(),
      ),
    );
  }
}
 
class ButtonColumn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                // 处理按钮点击事件
                print('RaisedButton tapped!');
              },
              child: Text('Raised'),
            ),
            SizedBox(width: 12.0), // 空间
            FlatButton(
              onPressed: () {
                // 处理按钮点击事件
                print('FlatButton tapped!');
              },
              child: Text('Flat'),
            ),
          ],
        ),
        Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            OutlineButton(
              onPressed: () {
                // 处理按钮点击事件
                print('OutlineButton tapped!');
              },
              child: Text('Outline'),
            ),
            SizedBox(width: 12.0), // 空间
            IconButton(
              icon: Icon(Icons.thumb_up_alt),
              onPressed: () {
                // 处理按钮点击事件
                print('IconButton tapped!');
              },
            ),
          ],
        ),
        ButtonBar(
          children: <Widget>[
            FlatButton(
              onPressed: () {
                // 处理按钮点击事件
                print('ButtonBar FlatButton tapped!');
              },
              child: Text('ButtonBar'),
            ),
            RaisedButton(
              onPressed: () {
                // 处理按钮点击事件
                print('ButtonBar RaisedButton tapped!');
              },
              child: Text('ButtonBar'),
            ),
          ],
        ),
      ],
    );
  }
}

这段代码展示了如何在Flutter应用中创