第八节:Flutter中Button按钮

1. 对于Flutter中按钮的认识

1.1 Flutter中的按钮

Flutter里有很多的Button组件,常见的按钮组件有:RaisedButton, FlatButton,IconButton,OutlineButton, ButtonBar, FloatingActionButton等

说明:

RaisedButton : 凸起的按钮,其实就是Material Design 风格发Button
FlatButton: 扁平化的按钮
OutlineButton: 线框按钮
IconButton : 图标按钮
ButtonBar: 按钮组
FloatingActionButton: 浮动按钮

按钮源码中的所有属性

const RaisedButton({
    Key key,
    @required VoidCallback onPressed,
    VoidCallback onLongPress,
    ValueChanged<bool> onHighlightChanged,
    ButtonTextTheme textTheme,
    Color textColor,
    Color disabledTextColor,
    Color color,
    Color disabledColor,
    Color focusColor,
    Color hoverColor,
    Color highlightColor,
    Color splashColor,
    Brightness colorBrightness,
    double elevation,
    double focusElevation,
    double hoverElevation,
    double highlightElevation,
    double disabledElevation,
    EdgeInsetsGeometry padding,
    VisualDensity visualDensity,
    ShapeBorder shape,
    Clip clipBehavior = Clip.none,
    FocusNode focusNode,
    bool autofocus = false,
    MaterialTapTargetSize materialTapTargetSize,
    Duration animationDuration,
    Widget child,
})

我们只看一些常用的

1.2 Flutter中按钮的属性

Flutter 按钮组件中的一些属性

属性名称	值的类型	属性值
onPressed	VoildCallback,接受一个方法	必填参数,按钮按下时触发的回调,<br />传null表示按钮禁用
child	Widget	文本控件
textColor	Color	文本颜色
color	Color	按钮颜色
disabledColor	Color	按钮禁用时文本颜色
splashColor	Color	点击按钮是水波纹的颜色
highlightColor	Color	点击按钮后按钮的颜色
elevation	double	阴影的范围,值越大范围越大
padding		内边距
Shape		设置按钮的形状

1.3 圆角和圆形圆形

Shape按钮的形状

1.圆角按钮

shape:RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10)
)

2.圆形按钮

shape: CircleBorder(
    side: BorderSide(
        color: Colors.white
    )
)

2. Flutter按钮属性的使用

我们以RiasedButton 按钮为例,理解属性的使用和意思, 其他按钮也一样

2.1 禁用按钮

如果没有添加onPressed属性,按钮默认为禁用按钮

通常禁用按钮会选择将onPressed属性值设置为null

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(

            child: Container(

                // 按钮
                child: RaisedButton(
                    child:Text("普通按钮"),
                    onPressed: (){    // 如果使用onPressed, 则为禁用按钮,
                        print("普通按钮");
                    }
                )
            )
        );
    }
}

2.2 按钮禁用时的文字颜色

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(

            child: Container(

                // 按钮
                child: RaisedButton(
                    child:Text("普通按钮"),
                    disabledColor:Colors.pink,  // 按钮禁用时的颜色
                    disabledTextColor: Colors.green, // 按钮禁用时的文本颜色
                    onPressed: null  // 禁用按钮
                )
            )
        );
    }
}

2.3 普通按钮

只使用onPressed属性,按钮为可以用按钮,其他样式为默认的

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(
            child: Container(

                // 按钮
                child: RaisedButton(
                    child:Text("普通按钮"),
                    onPressed: (){    // 如果使用onPressed, 则为禁用按钮
                        print("普通按钮");
                    }
                )
            )
        );
    }
}

2.4 添加按钮颜色和文字颜色

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(

            child: Container(

                // 按钮
                child: RaisedButton(
                    child:Text("普通按钮"),
                    color:Colors.blue,        // 按钮颜色
                    textColor: Colors.white,  // 按钮文字颜色
                    onPressed: (){    // 如果使用onPressed, 则为禁用按钮
                        print("普通按钮");
                    }
                )
            )
        );
    }
}

2.5 按钮的阴影

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(

            child: Container(

                // 按钮
                child: RaisedButton(
                    child:Text("普通按钮"),
                    color:Colors.blue,        // 按钮颜色
                    textColor: Colors.white,  // 按钮文字颜色
                    elevation: 30.0,          // 按钮的阴影
                    onPressed: (){    //  如果使用onPressed, 则为禁用按钮
                        print("普通按钮");
                    }
                )
            )
        );
    }
}

2.6 修改按钮按下时的颜色

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(

            child: Container(

                // 按钮
                child: RaisedButton(
                    child:Text("普通按钮"),
                    color:Colors.blue,        // 按钮颜色
                    textColor: Colors.white,  // 按钮文字颜色
                    elevation: 30.0,          // 按钮的阴影
                    highlightColor: Colors.green,  // 按钮按下的颜色
                    onPressed: (){    //  如果使用onPressed, 则为禁用按钮
                        print("普通按钮");
                    }
                )
            )
        );
    }
}

2.7 按钮的水波颜色

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(

            child: Container(

                // 按钮
                child: RaisedButton(
                    child:Text("普通按钮"),
                    color:Colors.blue,        // 按钮颜色
                    textColor: Colors.white,  // 按钮文字颜色
                    elevation: 30.0,          // 按钮的阴影
                    highlightColor: Colors.green,  // 按钮按下的颜色
                    splashColor:Colors.red,     // 按钮的水波颜色
                    onPressed: (){    //  如果使用onPressed, 则为禁用按钮
                        print("普通按钮");
                    }
                )
            )
        );
    }
}

2.8 设置按钮的大小

在按钮的参数中没有修改按钮大小的配置, 如果需要修改按钮大小

则需要将按钮放在容器中, 改变容器的大小

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(

            child: Container(
                // 修改容器大小,进而修改按钮的大小
                height:50.0,
                width:100.0,

                // 按钮
                child: RaisedButton(
                    child:Text("普通按钮"),
                    color:Colors.blue,        // 按钮颜色
                    textColor: Colors.white,  // 按钮文字颜色
                    elevation: 30.0,          // 按钮的阴影
                    highlightColor: Colors.green,  // 按钮按下的颜色
                    splashColor:Colors.red,     // 按钮的水波颜色
                    onPressed: (){    //  如果使用onPressed, 则为禁用按钮
                        print("普通按钮");
                    }
                )
            )
        );
    }
}

2.9 圆角和圆形按钮

通过shape参数来修改圆角和圆形按钮

圆角按钮（用的比较多）

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(

            child: Container(
                // 修改容器大小,进而修改按钮的大小
                height:50.0,
                width:100.0,

                // 按钮
                child: RaisedButton(
                    child:Text("普通按钮"),
                    color:Colors.blue,        // 按钮颜色
                    textColor: Colors.white,  // 按钮文字颜色
                    elevation: 30.0,          // 按钮的阴影
                    highlightColor: Colors.green,  // 按钮按下的颜色
                    splashColor:Colors.red,     // 按钮的水波颜色
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20)
                    ),
                    onPressed: (){    //  如果使用onPressed, 则为禁用按钮
                        print("普通按钮");
                    }
                )
            )
        );
    }
}

圆形按钮

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(

            child: Container(
                // 修改容器大小,进而修改按钮的大小
                height:50.0,
                width:100.0,

                // 按钮
                child: RaisedButton(
                    child:Text("普通按钮"),
                    color:Colors.blue,        // 按钮颜色
                    textColor: Colors.white,  // 按钮文字颜色
                    elevation: 30.0,          // 按钮的阴影
                    highlightColor: Colors.green,  // 按钮按下的颜色
                    splashColor:Colors.red,     // 按钮的水波颜色
                    shape:CircleBorder(
                        side: BorderSide(
                            color:Colors.white
                        )
                    ),
                    onPressed: (){    //  如果使用onPressed, 则为禁用按钮
                        print("普通按钮");
                    }
                )
            )
        );
    }
}

3. Flutter其他按钮的使用

3.1 FlatButton

扁平按钮，默认背景透明并不带阴影。按下后，会有背景色

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(

            child: Container(
                // 修改容器大小,进而修改按钮的大小
                height:50.0,
                width:100.0,

                // 按钮
                child: FlatButton(
                    child:Text("扁平按钮"),
                    onPressed: (){    //  如果使用onPressed, 则为禁用按钮
                        print("扁平按钮");
                    }
                )
            )
        );
    }
}

3.2 OutlineButton 边框按钮

默认有一个边框，不带阴影且背景透明。按下后，边框颜色会变亮、同时出现背景和阴影(较弱)，

color参数无效

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(

            child: Container(
                // 修改容器大小,进而修改按钮的大小
                height:50.0,
                width:100.0,

                // 按钮
                child: OutlineButton(
                    child:Text("扁平按钮"),
                    color:Colors.blue,        // 按钮颜色无效
                    highlightColor: Colors.green,  // 按钮按下的颜色
                    splashColor:Colors.red,     // 按钮的水波颜色

                    onPressed: (){    //  如果使用onPressed, 则为禁用按钮
                        print("扁平按钮");
                    }
                )
            )
        );
    }
}

3.3 IconButton 图标按钮

IconButton是一个可点击的Icon，不包括文字，默认没有背景，点击后会出现背景，

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(
            child: Container(
                // 修改容器大小,进而修改按钮的大小
                height:50.0,
                width:100.0,

                // 按钮
                child: IconButton(
                    icon:Icon(Icons.search),
                    onPressed: (){    //  如果使用onPressed, 则为禁用按钮
                        print("图标按钮");
                    }
                )
            )
        );
    }
}

3.4 带图标的按钮

RaisedButton、FlatButton、OutlineButton都有一个icon 构造函数，通过它可以轻松创建带图标的按钮，

class Home extends StatelessWidget{
    @override
    Widget build(BuildContext content){
        return Center(

            child: Container(
                // 修改容器大小,进而修改按钮的大小
                height:50.0,
                width:100.0,

                // 带图标的按钮
                child: RaisedButton.icon(

                    icon:Icon(Icons.search),
                    label:Text("搜索"),
                    color:Colors.blue,
                    textColor: Colors.white,
                    onPressed: (){    //  如果使用onPressed, 则为禁用按钮
                        print("搜索");
                    }
                )
            )
        );
    }
}

至于按钮组和浮动按钮,后面再说