Flutter-按钮

在 Flutter 里有很多的 Button，包括了：RaisedButton、FloatingActionButton、FlatButton、IconButton、PopupMenuButton、ButtonContainer

RaisedButton

RaisedButton(
    child: Text('Button'),
    onPressed: (){},
    splashColor: Colors.grey,
    textColor: Theme.of(context).accentColor,
),

RaiseButton

FloatingActionButton

FloatingActionButton 是一个浮动在页面右下角的浮动按钮。
当然，我们也可以根据一定的写法来让其位置变化

class FloatingActionButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    final Widget _floatingActionButton = FloatingActionButton(
      onPressed: (){},
      child: Icon(Icons.add),
      elevation: 0.0, // 设置阴影
      backgroundColor: Colors.red,
//      shape: BeveledRectangleBorder( // 设置按钮形状
//        borderRadius: BorderRadius.circular(30.0)
//      ),
    );
    // extended创建的漂浮动作按钮
    final _floatingActionButtonExtended = FloatingActionButton.extended(
      onPressed: (){},
      icon: Icon(Icons.add),
      label: Text('Add'),
    );

    return Scaffold(
      appBar: AppBar(
        title: Text('FloatingActionButtonDemo'),
        elevation: 0.0,
      ),
      // 漂浮动作按钮
      floatingActionButton: _floatingActionButton,
      // 漂浮动作按钮默认会在底部工具栏上面，可以通过下面方法调整漂浮动作按钮的位置
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        child: Container(height: 50,),
        shape: CircularNotchedRectangle(), // 设置漂浮动作按钮与底部工具栏之间的切口
      ),
    );
  }
}

FlatButton

文字按钮
FlatButton 与 MaterialButton 类似，不同的是它是透明背景的。如果一个 Container 想要点击事件时，可以使用 FlatButton 包裹，而不是 MaterialButton。因为 MaterialButton 默认带背景，而 FlatButton 默认不带背景。

new FlatButton(
    child: new Text('点我'),
    onPressed: () {},
)

IconButton

IconButton 顾名思义就是 Icon + Button 的复合体，当某个 Icon 需要点击事件时，使用 IconButton 最好不过。
这里我们拿RaisedButton来举例（其他按钮也有这样的写法）

RaisedButton.icon(
  onPressed: (){},
  icon: Icon(Icons.add),
  label: Text('Button'),
  elevation: 12,
  textColor: Theme.of(context).accentColor,
)

RaisedButton.icon

PopupMenuButton

下拉菜单按钮

class PopupMenuButtonDemo extends StatefulWidget {
  @override
  _PopupMenuButtonDemoState createState() => _PopupMenuButtonDemoState();
}

class _PopupMenuButtonDemoState extends State {
  String _currentMenuItem = 'Home';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('_WidgetDemo'),
        elevation: 0,
      ),
      body: Container(
        padding: EdgeInsets.all(16),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(_currentMenuItem),
                PopupMenuButton(
                  onSelected: (value){
                    setState(() {
                      _currentMenuItem = value;
                    });
                  },
                  itemBuilder: (BuildContext context)=>[
                    PopupMenuItem(
                      value: 'Home',
                      child: Text('Home'),
                    ),
                    PopupMenuItem(
                      value: 'Discover',
                      child: Text('Discover'),
                    ),
                    PopupMenuItem(
                      value: 'Community',
                      child: Text('Community'),
                    ),
                    PopupMenuItem(
                      value: 'Me',
                      child: Text('Me'),
                    )
                  ],
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

PopupMenuButton 未点击

PopupMenuButton 点击后

ButtonContainer

按钮容器

Container(
  width: 160, // 改变其大小可改变按钮的大小
  child: OutlineButton(
    child: Text('Button'),
    onPressed: (){},
    splashColor: Colors.grey[100],
    borderSide: BorderSide(
      color: Colors.black
    ),
    textColor: Colors.black,
    highlightColor: Colors.grey,
  ),
)

ButtonContainer.png