5-Flutter常用组件--按钮

一.DropdownButton下拉按钮

类型T是每个下拉菜单项代表的值的类型，所有的条目类型一致，onChanged回调应更新定义下拉列表值的状态变量。 它还应该调用State.setState来使用新值重建下拉列表

disabledHint→小部件
禁用下拉菜单时显示的消息
elevation 打开菜单时放置菜单的Z坐标
hint 如果value为null，则显示
icon→小部件
用于下拉按钮图标的小部件
iconDisabledColor→颜色
如果禁用了此按钮，即onChanged为null，则该图标的任何Icon后代的颜色
iconEnabledColor→颜色
如果启用了此按钮，即定义了onChanged，则该图标的任何Icon后代的颜色
iconSize→两倍
下拉按钮的向下箭头图标按钮要使用的大小
isDense→布尔
降低按钮的高度
isExpanded→布尔
将下拉菜单的内部内容设置为水平填充其父对象
items → List<DropdownMenuItem >
用户可以选择的项目列表
onChanged→ValueChanged
当用户选择一个项目时调用
style →TextStyle
下拉按钮和点击该按钮时出现的下拉菜单中用于文本的文本样式。
underline →小部件
用于绘制下拉按钮下划线的小部件
value →T
当前选定的DropdownMenuItem的值；如果未选择任何项，则为null。如果value为null，则弹出菜单，就像选择了第一项一样

DropdownMenuItem

主要应用于DropdownButton的项目。
child →小部件
树中此窗口小部件下方的窗口小部件。 […]
value →T
如果用户选择此菜单项，则返回的值。

class MyBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: _MyBoxHomePage(),
    );
  }
}

class _MyBoxHomePage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return BoxHomePage();
  }

}

class BoxHomePage extends State<_MyBoxHomePage> {


  List<DropdownMenuItem> _items = List.generate(4, (i)=>DropdownMenuItem(
    value: "ITEM ${i}",
    child: Text("ITEM ${i}"),
  ));

  String _selectValue = "ITEM 0";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Box组件"),
      ),
      body: Center(
        child: DropdownButton(
          hint: Text("请选择"),
          value: _selectValue,
          items: _items,
          //下拉框字体颜色
          style: TextStyle(color: Colors.deepPurple),
          underline: Container(
            height: 2,
            color: Colors.deepPurpleAccent,
          ),
          //onChanged的Function必须是泛型，如果写成（String value）就会报错
          onChanged: (T){
            setState(() {
                _selectValue = T;
            });
          },

        )
      )
      
    );
  }

  @override
  State<StatefulWidget> createState() {
    return null;
  }
}

二.FlatButton扁平按钮

一定要加上
onPressed: () {
/…/
},
否则color等属性不生效
child中的控件中如果有自己的style并且定义了文字颜色就会覆盖FlatButton自己的textcolor属性
animationDuration→持续时间
定义shape and elevation动画更改的持续时间
clipBehavior→剪辑
根据此选项，内容将被裁剪（或不裁剪）
color → Color
当按钮处于默认（未按下，启用）状态时，按钮的颜色

FlatButton(…）
一个简单的text Button

FlatButton.icon(…）
Create a text button from a pair of widgets that serve as the button’s icon and label,图标+文字的按钮

class _MyButtonHomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Button"),
      ),
      body: Column(

        children: <Widget>[
          /*1/FlatButton扁平按钮------*/
          FlatButton(
            color: Colors.red,
            textColor: Colors.amberAccent,
            colorBrightness: Brightness.dark,
            focusColor: Colors.blueGrey,
            autofocus: true,
            //点击时的颜色
            highlightColor: Colors.blue,

            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(5.0),
            ),
            child: Text(
              "FlatButton",
              style: TextStyle(
                color: Colors.white,
                fontSize: 20,
              ),
            ),
            //一定要加上onPressed，否则color等属性失效
            onPressed: (){

            },
            //colorBrightness: Brightness.light,
          ),


        ],
      ),
    );
  }
}

三、FloatingActionButton悬浮按钮

每个屏幕最多只能使用一个浮动操作按钮。 浮动操作按钮应用于积极的操作，例如“创建”，“共享”或“导航”。 （如果在一个Route中使用了多个浮动操作按钮，则请确保每个按钮都有一个唯一的heroTag，否则将引发异常。）

如果onPressed回调为null，则该按钮将被禁用，并且不会对触摸做出反应。 不建议禁用浮动操作按钮，因为不会向用户指示该按钮已被禁用。 如果禁用浮动操作按钮，请考虑更改backgroundColor。

backgroundColor → Color
The color to use when filling the button.
foregroundColor → Color
The default icon and text color.
heroTag → Object
The tag to apply to the button’s Hero widget
isExtended → bool
True if this is an “extended” floating action button.
tooltip → String
Text that describes the action that will occur when the button is pressed.

FloatingActionButton
Creates a circular floating action button.，只有一个icon的图标

FloatingActionButton.extended（…）
Creates a wider StadiumBorder-shaped floating action button with an optional icon and a label, icon形容图标，label形容文字

          FloatingActionButton(
            onPressed: () {
              /**/
            },
            backgroundColor: Colors.red,
            child: Icon(Icons.add_a_photo),
            //长按按钮时显示
            tooltip: "点了FloatingActionButton",
            isExtended: true,
          ),

          FloatingActionButton(
            onPressed: () {
              /**/
            },
            backgroundColor: Colors.deepPurpleAccent,
            child: Icon(Icons.add_a_photo),
            //长按按钮时显示
            tooltip: "点了FloatingActionButton",
            isExtended: true,
            //方形的形状
           /* shape: Border.all(
              width: 2.0,
              color: Colors.white,
              style: BorderStyle.solid,
            ),*/
           shape: RoundedRectangleBorder(
             borderRadius: BorderRadius.only(
               topLeft: Radius.circular(5),
               topRight : Radius.circular(5),
               bottomLeft:  Radius.circular(5),
               bottomRight:  Radius.circular(5),
             ),
             side: BorderSide(
               color: Colors.white,
               width: 2.0,
               style: BorderStyle.solid,
             ),
           ),
          ),

          FloatingActionButton.extended(
            onPressed: (){
              /**/
            },
            backgroundColor: Colors.blue,
            foregroundColor: Colors.grey,
            icon: Icon(Icons.directions_walk),
            label: Text("带图标的FloatingActionButton",style: TextStyle(color: Colors.white),),

          )

效果图：

四.IconButton图标按钮

只有一个图标的按钮，一般常用语AppBar.actions

IconButton(
            icon: Icon(Icons.title),
            onPressed: (){
              /**/
            },
            //提示信息
            tooltip: "长按有提示：文字",
            //图标大小
            iconSize: 30,
            //图标颜色
            color: Colors.deepPurpleAccent,
            //长按时颜色
            highlightColor: Colors.red,
            //点击时的颜色：墨汁飞溅
            splashColor: Colors.amberAccent,
            //对其方式，这个对齐指的是在父容器中的对齐位置
            alignment: Alignment.center,
          ),

效果图：

六/RaisedButton背景突出按钮

RaisedButton.icon（…）
创建文字+图标的按钮

RaisedButton(
            child: Text("RaisedButton"),
          ),

          RaisedButton(
            onPressed: (){
              /**/
            },
            child: Text("RaisedButton"),
          ),

          RaisedButton(
            onPressed: (){
              /**/
            },
            child: Text("RaisedButton"),
            textColor: Colors.white,
            color: Colors.red,

          ),

七、OutlineButton边框按钮

边框形状由shape定义，边框外观由 borderSide、disabledBorderColor, and highlightedBorderColor。
定义。
默认情况下，边框是一个1像素宽的灰色圆角矩形，当按下或禁用按钮时，边框不会更改。默认情况下，按钮的背景是透明的。
如果onPressed回调为null，则该按钮将被禁用，并且默认情况下将类似于DisabledColor中的平面按钮

默认情况下，按钮的highlightElevation定义为0.0（无阴影），它定义按下按钮时投影的大小。
如果将highlightElevation的值设置为大于0.0，则该按钮将成为RaisedButton和FlatButton之间的交叉：
带边框的按钮，其高度增加，并且在按下按钮时其背景变得不透明。

如果您希望水龙头具有墨水飞溅效果，但又不想使用按钮，请考虑直接使用InkWell。

大纲按钮的最小大小为88.0 x 36.0，可以用ButtonTheme覆盖

OutlineButton.icon
带图标的按钮

特殊属性：
borderSide → BorderSide
Defines the color of the border when the button is enabled but not pressed, and the border outline’s width and style in general. […]
disabledBorderColor → Color
The outline border’s color when the button is not enabled. […]
highlightedBorderColor → Color
The outline border’s color when the button is enabled and pressed

borderSide→边界边
定义启用按钮但未按下时的边框颜色，以及边框轮廓的宽度和样式。 […]
disabledBorderColor→颜色
未启用按钮时轮廓边框的颜色。 […]
高亮边框颜色→颜色
启用并按下按钮时轮廓边框的颜色