第八節(jié):Flutter中Button按鈕

1. 對于Flutter中按鈕的認識

1.1 Flutter中的按鈕

Flutter里有很多的Button組件,常見的按鈕組件有:RaisedButton, FlatButton,IconButton,OutlineButton, ButtonBar, FloatingActionButton等

說明:

RaisedButton : 凸起的按鈕,其實就是Material Design 風格發(fā)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,接受一個方法	必填參數(shù),按鈕按下時觸發(fā)的回調(diào),<br />傳null表示按鈕禁用
child	Widget	文本控件
textColor	Color	文本顏色
color	Color	按鈕顏色
disabledColor	Color	按鈕禁用時文本顏色
splashColor	Color	點擊按鈕是水波紋的顏色
highlightColor	Color	點擊按鈕后按鈕的顏色
elevation	double	陰影的范圍,值越大范圍越大
padding		內(nèi)邊距
Shape		設(shè)置按鈕的形狀

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屬性值設(shè)置為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 設(shè)置按鈕的大小

在按鈕的參數(shù)中沒有修改按鈕大小的配置, 如果需要修改按鈕大小

則需要將按鈕放在容器中, 改變?nèi)萜鞯拇笮?/p>

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參數(shù)來修改圓角和圓形按鈕

圓角按鈕（用的比較多）

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 邊框按鈕

默認有一個邊框睛低，不帶陰影且背景透明谎痢。按下后磕昼，邊框顏色會變亮、同時出現(xiàn)背景和陰影(較弱)节猿，

color參數(shù)無效

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票从，不包括文字，默認沒有背景滨嘱，點擊后會出現(xiàn)背景峰鄙，

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 構(gòu)造函數(shù)吟榴，通過它可以輕松創(chuàng)建帶圖標的按鈕，

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("搜索");
                    }
                )
            )
        );
    }
}

至于按鈕組和浮動按鈕,后面再說