技術標籤：dartflutter

RaisedButton (凸起的按鈕，其實就是Android中的Material Design風格的Button ，繼承自MaterialButton)

RaisedButton的常用屬性

需要注意的是，onPressed如果傳null，則表示按鈕禁用

return RaisedButton(
      onPressed: null,
    );

如果不設定onPressed，按鈕的很多設定都會無效。

OutlineButton(線框按鈕)

OutlineButton是一個有預設邊線且背景透明的按鈕，也就是說我們設定其邊線和顏色是無效的，其他屬性基本上同上。

             OutlineButton(
               child: Text("線框按鈕"),
               splashColor: Colors.white,    //點選按鈕時水波紋的顏色
               highlightColor: Colors.white,  //長按按鈕時的顏色
               onPressed: (){

               },

IconButton(圖示按鈕)

             IconButton(
               icon: Icon(Icons.add),
               color: Colors.blue,
               iconSize: 40,
               onPressed: (){
                 print("這是圖示按鈕");
               },
             ),
 

shape這個引數用來設定按鈕的形狀，其接收值是ShapeBorder型別。

shape的常用實現類如下：

• BeveledRectangleBorder帶斜角的長方形邊框
• CircleBorder圓形邊框
• RoundedRectangleBorder圓角矩形
• StadiumBorder兩端是半圓的邊框

實現類中常用的兩個屬性

• side用來設定邊線（顏色，寬度等）
• borderRadius用來設定圓角

borderRadius分為上下左右四個方向，下面的方法都是對這四個方向進行設定，

• all配置所有方向
• cricular環形配置，跟all效果差不多，直接接收double型別的值
• horizontal只配置左右方向
• only可選左上，右上，左下，右下配置
• vertical只配置上下方向

具體的配置大家可以自己嘗試，我把我自己寫的按鈕的效果圖貼在下面：

程式碼如下：

import 'package:flutter/material.dart';


class button extends StatefulWidget {
  @override
  _buttonState createState() => _buttonState();
}

class _buttonState extends State<button> {

  var color=Colors.blue;
  var colorIs=true;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text("自定義按鈕"),
      ),
       body: Container(
         width: MediaQuery.of(context).size.width,  //充滿螢幕寬度
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.center,
           children: <Widget>[
             RaisedButton(
               child: Text("普通按鈕"),
               onPressed: (){
                 print("普通按鈕的點選事件");
               },
             ),
             SizedBox(height: 10),
             RaisedButton(
               child: Text("有顏色的按鈕"),
               color: Colors.yellow,   //按鈕顏色
               textColor: Colors.white,  //文字顏色
               splashColor: Colors.grey,    //點選按鈕時水波紋的顏色
               highlightColor: Colors.brown,  //長按按鈕時的顏色
               onPressed: (){
                 print("有顏色按鈕的點選事件");
               },
             ),
             SizedBox(height: 10),
             RaisedButton(
               disabledColor: Colors.blue,  //按鈕禁用時的顏色
               disabledTextColor: Colors.red, //按鈕禁用時的文字顏色
               onPressed: null,
             ),
             SizedBox(height: 10),
             RaisedButton(
               child: Text("有陰影的按鈕"),
               elevation: 10,       //陰影的範圍
               padding: EdgeInsets.only(left: 8.0),
               onPressed: (){
                 print("有陰影的點選事件");
               },
             ),
             SizedBox(height: 10,),
             Container(
               width: 300,
               height: 50,
               child: RaisedButton(
                 color: Colors.blue,
                 textColor: Colors.white,
                 child: Text("自定義寬高按鈕"),
                 onPressed: (){
                   },
               ),
             ),
             SizedBox(height: 10,),
             RaisedButton.icon(
               icon: Icon(Icons.add),
               label: Text("圖示按鈕"),
               color: Colors.blue,
               textColor: Colors.white,
               onPressed: (){

               },
             ),
             SizedBox(height: 10,),
             Container(
               width: 300,
               height: 50,
               child: RaisedButton(
                 color: this.color,
                 textColor: Colors.white,
                 shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(10),
                 ),
                 child: Text("圓角按鈕,點選以後變色"),
                 onPressed: (){
                   setState(() {
                     if(this.colorIs){
                       this.colorIs=false;
                       this.color=Colors.red;
                     }else{
                       this.colorIs=true;
                       this.color=Colors.blue;
                     }
                   });
                 },
               ),
             ),
             SizedBox(height: 10,),
             Container(
               width: 80,
               height: 80,
               child: RaisedButton(
                 color: Colors.blue,
                 textColor: Colors.white,
                 shape: CircleBorder(
                   side: BorderSide(color: Colors.red),  //去掉這一句就沒有邊框
                 ),
                 child: Text("圓形按鈕"),
                 onPressed: (){
                 },
               ),
             ),
             SizedBox(height: 10,),
             IconButton(
               icon: Icon(Icons.add),
               color: Colors.blue,
               iconSize: 40,    //圖示大小
               onPressed: (){
                 print("這是圖示按鈕");
               },
             ),
             SizedBox(height: 10,),
             Container(
               width: 300,
               height: 50,
               child: OutlineButton(
                 child: Text("線框按鈕"),
                 splashColor: Colors.white,    //點選按鈕時水波紋的顏色
                 highlightColor: Colors.white,  //長按按鈕時的顏色
                 onPressed: (){

                 },
               ),
             ),
           ],
         ),
       ),
    );
  }
}

基礎篇

------------------------------------------------------------

Flutter之自定義底部導航條以及頁面切換例項——Flutter基礎系列

Flutter之自定義頂部Tab——Flutter基礎系列

Flutter之抽屜元件drawer,設定drawer寬度——Flutter基礎系列

Flutter之自定義按鈕RaisedButton、OutlineButton、IconButton等——Flutter基礎系列