?Flutter提供了一些便利的按鈕樣式

• RaisedButton
  幾個(gè)常用的屬性：

    VoidCallback onPressed,// 點(diǎn)擊回調(diào)
    Color textColor,//文字顏色
    Color color,//按鈕顏色
    Color disabledColor,//不可點(diǎn)擊是按鈕的顏色
    Color highlightColor,//高亮的顏色
    EdgeInsetsGeometry padding,//內(nèi)邊距
    ShapeBorder shape,//設(shè)置按鈕的形狀
    Widget child,//按鈕里的內(nèi)容

RaisedButton(
      onPressed: () {},
      child: Text('不可點(diǎn)擊按鈕', style: TextStyle(fontSize: 16),),
    );

image.png

如果要設(shè)置按鈕為不可點(diǎn)擊狀態(tài)的話，需要把onPressed回調(diào)函數(shù)設(shè)置為null

RaisedButton(
      onPressed: null,
      child: Text('不可點(diǎn)擊按鈕', style: TextStyle(fontSize: 16),),
    );

image.png

Color背景色

RaisedButton(
      color: Colors.cyan,
      child: const Text(  '可點(diǎn)擊按鈕', style: TextStyle(fontSize: 16, color: Colors.black),
      ),
      onPressed: () {},
    );

image.png

• IconButtons：可以快速創(chuàng)建一個(gè)左邊圖片右邊文字的按鈕
  
  image.png
  
  需要一個(gè)文字widget和IconWidget

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

• FloatingActionButton：可以快速創(chuàng)建圓形按鈕
  注：如果想要設(shè)置按鈕的大小，可以用Container包裝一下，設(shè)置寬高

class CircleBtn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 70,
      height: 70,
      child: FloatingActionButton(
        onPressed: () {
          print('點(diǎn)擊了圓形按鈕');
        },
        child: Text(
          '圓形按鈕',
          style: TextStyle(fontSize: 14, color: Colors.red),
        ),
      ),
    );
  }
}

image.png

• DropdownButton：類似于點(diǎn)擊點(diǎn)擊下拉菜單的控件
  需要繼承自StatefulWidget,因?yàn)橄吕藛吸c(diǎn)擊回調(diào)后可以得到狀態(tài)改變的回調(diào)
  DropdownButton的items屬性是菜單的集合，包含多個(gè)DropdownMenuItem，如果用戶點(diǎn)擊了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;
          });
        }
    );
  }
}

具體代碼請(qǐng)看Demo地址