Flutter基础篇之六-Buttons

 Flutter提供了一些便利的按钮样式

• RaisedButton
  几个常用的属性：

    VoidCallback onPressed,// 点击回调
    Color textColor,//文字颜色
    Color color,//按钮颜色
    Color disabledColor,//不可点击是按钮的颜色
    Color highlightColor,//高亮的颜色
    EdgeInsetsGeometry padding,//内边距
    ShapeBorder shape,//设置按钮的形状
    Widget child,//按钮里的内容

RaisedButton(
      onPressed: () {},
      child: Text('不可点击按钮', style: TextStyle(fontSize: 16),),
    );

image.png

如果要设置按钮为不可点击状态的话，需要把onPressed回调函数设置为null

RaisedButton(
      onPressed: null,
      child: Text('不可点击按钮', style: TextStyle(fontSize: 16),),
    );

image.png

Color背景色

RaisedButton(
      color: Colors.cyan,
      child: const Text(  '可点击按钮', style: TextStyle(fontSize: 16, color: Colors.black),
      ),
      onPressed: () {},
    );

image.png

• IconButtons：可以快速创建一个左边图片右边文字的按钮
  image.png
  需要一个文字widget和IconWidget

class IconBtn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton.icon(
      onPressed: () {
        print('点我了');
      },
      color: Colors.red,
      label: Text(
        '文字',
        style: TextStyle(fontSize: 16),
      ),
      icon: Icon(
        Icons.ac_unit,
        size: 30,
        color: Colors.cyan,
      ),
    );
  }
}

• FloatingActionButton：可以快速创建圆形按钮
  注：如果想要设置按钮的大小，可以用Container包装一下，设置宽高

class CircleBtn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 70,
      height: 70,
      child: FloatingActionButton(
        onPressed: () {
          print('点击了圆形按钮');
        },
        child: Text(
          '圆形按钮',
          style: TextStyle(fontSize: 14, color: Colors.red),
        ),
      ),
    );
  }
}

image.png

• DropdownButton：类似于点击点击下拉菜单的控件
  需要继承自StatefulWidget,因为下拉菜单点击回调后可以得到状态改变的回调
  DropdownButton的items属性是菜单的集合，包含多个DropdownMenuItem，如果用户点击了item，返回value值

class DropDownBtn extends StatefulWidget {
  @override
  _DropDownBtnState createState() => _DropDownBtnState();
}

class _DropDownBtnState extends State<DropDownBtn> {
  String dropdownValue = '扫一扫';
  @override
  Widget build(BuildContext context) {
    return DropdownButton(
      value:dropdownValue ,
        items: _downTitles
            .map<DropdownMenuItem<String>>((String value) {
          return DropdownMenuItem<String>(value: value, child: Text(value));
        }).toList(),
        onChanged:(String newValue) {
          setState(() {
            dropdownValue = newValue;
          });
        }
    );
  }
}

具体代码请看Demo地址