美文网首页Flutter实战专题
Flutter基础篇之六-Buttons

Flutter基础篇之六-Buttons

作者: Michale_Zuo | 来源:发表于2020-10-11 11:10 被阅读0次

 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地址

相关文章

网友评论

    本文标题:Flutter基础篇之六-Buttons

    本文链接:https://www.haomeiwen.com/subject/koilpktx.html