Flutter - 常用基础组件(Wdiget)-Button

在flutter中 有很多种button,本文记录几个常见的button

RaisedButton / FlatButton / OutlineButton / FloatingActionButton(这个相对特别一点点)

不同样式按钮的属性或者参数方面的类型都是几乎一致的.
FloatingActionButton 按钮有点特别,
Scaffold 中有一个 floatingActionButton 属性,就是使用的这个按钮

下面是一个完整的Demo,归纳了:
RaisedButton / FlatButton/ OutlineButton / FloatingActionButton

import 'package:flutter/material.dart';

/*程序入口函数*/
void main() {
  //runApp ： Inflate the given widget and attach it to the screen.
  // 通过这个函数，把组件显示到屏幕上去；
  runApp(
    //自定义的class 继承于 StatelessWidget

      MyApp()
    // Text(
    //   // 'hello flutter',
    //   // textDirection: TextDirection.rtl,
    // )
  );
}

class MyApp extends StatelessWidget {
  const MyApp({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    //MaterialApp 是flutter SDK中提供的一个类 继承于StatefulWidget
    //An application that uses material design.
    // A convenience widget that wraps a number of widgets that are commonly required for material design applications.
    // It builds upon a [WidgetsApp] by adding material-design specific functionality, such as [AnimatedTheme] and
    // [GridPaper].
    // 使用MaterialApp 设计的应用程序。
    // 它封装了很多小部件,在 [WidgetsApp] 的基础上,
    //通过添加特定Widget设计功能，如[动画主题]和 [Grid Paper].
    return MaterialApp(
      //Implements the basic material design visual layout structure.
      //实现基本的材料设计视觉布局结构。
      //源码中海油非常多的注释,可以深入看一下;
      home: Scaffold(
        // AppBar 是用于设计导航栏的
        appBar: AppBar(
          title: Text('各种按钮'),
        ),

        // 这个body 就是用于设计页面内容的了,
        body: ButtonsDemo(),

        floatingActionButton: FloatingActionButtonDemo(),

        floatingActionButtonLocation: FloatingActionButtonLocation.startFloat,
      ),
    );
  }
}

class ButtonsDemo extends StatelessWidget {
  const ButtonsDemo({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        RaisedButtonDemo(),

        FlatButtonDemo(),

        OutlineButtonDemo(),

        FloatingActionButtonDemo(),

        //自定义button
        PRFButtonDemo()
      ],
    );
  }
}


/*自定义的按钮*/
class PRFButtonDemo extends StatelessWidget {
  const PRFButtonDemo({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      //设置背景颜色
      color: Colors.amberAccent,
      onPressed: () {},
      //设置显示内容
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(Icons.favorite, color: Colors.red,),
          Text('我喜欢作者', style: TextStyle(color: Colors.purple),)
        ],
      ),
      shape: RoundedRectangleBorder(
        //设置圆角
         //borderRadius:BorderRadius.all(Radius.circular(8)),
         borderRadius: BorderRadius.circular(10),
      ),

    );
  }
}

//浮动的圆形按钮
class FloatingActionButtonDemo extends StatelessWidget {
  const FloatingActionButtonDemo({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      child: Icon(Icons.favorite),
      onPressed: () {
        print('FloatingActionButton click');
      },
      backgroundColor: Colors.red,
    );
  }
}

//有边框按钮
class OutlineButtonDemo extends StatelessWidget {
  const OutlineButtonDemo({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return OutlineButton(
      child: Text('OutlineButton'),
      onPressed: () {
        print('点击了OutlineButton');
      },
    );
  }
}

//无边框按钮
class FlatButtonDemo extends StatelessWidget {
  const FlatButtonDemo({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      child: Text('FlatButton'),
      onPressed: () {
        print('点击了FlatButton');
      },
      color: Colors.orange,
      highlightColor: Colors.green,
    );
  }
}

////凸起的button
//RaisedButton 有一个@required参数:onPressed
// 这是一个闭包回调参数,用来响应点击事件的
class RaisedButtonDemo extends StatelessWidget {
  const RaisedButtonDemo({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        RaisedButton(
          onPressed: () {
            print('我点击了RaisedButton');
          },
          child: Text.rich(TextSpan(children: [
            WidgetSpan(
                child: Icon(
                  Icons.favorite,
                ),
                style: TextStyle(
                  fontSize: 30,
                )),
            TextSpan(text: ' RaisedButton', style: TextStyle(fontSize: 16))
          ])),
          textColor: Colors.red,
          highlightColor: Colors.blue,
          onHighlightChanged: (value) {
            if (value) {
              print('高亮状态');
            } else {
              print('离开状态');
            }
          },
          color: Colors.purple,
        ),
      ],
    );
  }
}