第二章●第七节：凸起按钮（RaisedButton）

Material Design“凸起按钮”。凸起按钮是基于按下按钮Material.elevation增加的Material 组件。

使用凸起按钮将维度添加到其他大多数平面布局中，例如，在长内容列表中，或在宽空间中。避免在已经凸起的内容上使用凸起按钮，如对话框或卡片上。

如果onPressed返回null，则该按钮将被禁用，其类似于disabledColor中的平面按钮。如果在修改按钮颜色并且没有效果时，请检查onPressed是否返回null。

如果你想要点击产生ink-splash效果，但不想使用按钮，可以考虑使用InkWell。

凸起按钮最小尺寸88.0*36.0，可以使用ButtonTheme来重写。

1.官方示例演示禁用凸起按钮、启用凸起按钮以及渐变背景的凸起按钮。

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("RaisedButton组件"),
        ),
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              RaisedButton(onPressed: null,child: Text("Disabled Button"),),
              RaisedButton(onPressed: (){},child: Text("Enabled Button"),),
              RaisedButton(
                onPressed: (){},
                textColor: Colors.white,
                padding: EdgeInsets.all(0.0),
                child: Container(
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: <Color>[Colors.red, Colors.green, Colors.blue]
                    )
                  ),
                  padding: EdgeInsets.all(10.0),
                  child: Text("Gradient Button"),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

}

RaisedButton

2. 也可以使用下面的按钮组件

• FlatButton：一个没有阴影的Material Design按钮；
• DropdownButton：一个显示可供选择的按钮；
• FloatingActionButton：Material应用程序中的圆形按钮；
• IconButton：用于创建包含图标的按钮；
• InkWell：实现平面按钮的ink splash部分；
• RawMaterialButton：创建基于Semantics、Material和InkWell组件的按钮；
• Material官网的Button按钮

官方提供了两种创建凸起按钮的构造函数，上面案例使用RaisedButton方式创建，另外一种是使用图标和标签来填充按钮。

import 'package:flutter/material.dart';

void main() => runApp(IconLabelRaisedButton());

class IconLabelRaisedButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("RaisedButton组件"),
        ),
        body: RaisedButton.icon(
            onPressed: (){},
            icon: Icon(Icons.account_balance),
            label: Text("点击返回首页")
        ),
      ),
    );
  }
}

RaisedButton.icon

本节内容到此结束，若在使用过程中遇到问题，欢迎留言交流，我们一起成长。

---

总目录结构