扣丁書屋

Flutter UI - button系 Widget

Flutter 中按鈕這種 widget 種類可是不少:

  • RaisedButton - 凸起按鈕,帶陰影
  • RaisedButton - 扁平按鈕,不帶陰影
  • OutlineButton - 自帶邊框的按鈕,不能設置背景色color
  • MaterialButton - MD 風格的按鈕,可以設置寬高值,是 Flutter 中所有按鈕的基類
  • IconButton - 在 Icon 基礎上加上點擊事件,不能設置背景色和邊框
  • FloatingActionButton - 懸浮按鈕
  • ButtonBar 按鈕組
  • RawMaterialButton 橫向按鈕組

MaterialButton

MaterialButton 是 Flutter 中所有 Button 類型的基類,MaterialButton 的參數再其他 Button 中都是通用的,我們簡單看一下:

const MaterialButton({
    Key key,
    @required this.onPressed, // 點擊事件,必須給值,寫null的話表示不可用
    this.onHighlightChanged,

    this.textTheme, //默認文字樣式
    this.textColor, // 文字顏色
    this.disabledTextColor, // 不可用時文字顏色

    this.color, // 背景色
    this.disabledColor, // 按鈕被禁用時的文字顏色
    this.highlightColor, // 按鈕的水波紋亮起的顏色,點擊之后的顏色,注意這個顏色點擊之后就一直在這里了,不是那種一瞬間顯示
    this.splashColor, // 波浪紋顏色
    this.colorBrightness, // 按鈕主題高亮

    this.elevation, // Z軸、陰影,正常應該小于 5
    this.highlightElevation, // 按鈕高亮時的下面的陰影長度
    this.disabledElevation,

    this.padding,
    this.shape, // 按鈕樣式
    this.clipBehavior = Clip.none,
    this.materialTapTargetSize,
    this.animationDuration,
    this.minWidth,
    this.height,
    this.child, // 按鈕內部widget,一般都是text
  })

1. textTheme 系統默認提供的配色方案:

  • ButtonTextTheme.normal:

  • ButtonTextTheme.accent:

  • ButtonTextTheme.primary:

2. shape 提供了4種預設的按鈕形狀:

  • BeveledRectangleBorder

  • CircleBorder

  • RoundedRectangleBorder

  • StadiumBorder

3. 按鈕按下時圖示:


RaisedButton

RaisedButton - 凸起按鈕,帶陰影的那種

class DD extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
        onPressed: () {
          print("AAAAAA");
        },
        color: Colors.blueAccent,
        child: Text(
          "浮動按鈕",
          style: TextStyle(fontSize: 30),
        ),
        textColor: Colors.white,
        elevation: 10,
        disabledColor: Colors.grey,
        padding: EdgeInsets.all(20),
        splashColor: Colors.red,
        shape: BeveledRectangleBorder(
          borderRadius: BorderRadius.circular(10),
        ));
  }
}

FlatButton

FlatButton - 扁平按鈕,不能帶陰影,其他和 RaisedButton 一樣

class DD extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FlatButton(
        onPressed: () {
          print("AAAAAA");
        },
        color: Colors.blueAccent,
        child: Text(
          "浮動按鈕",
          style: TextStyle(fontSize: 30),
        ),
        textColor: Colors.white,
        disabledColor: Colors.grey,
        padding: EdgeInsets.all(20),
        splashColor: Colors.red,
        shape: BeveledRectangleBorder(
          borderRadius: BorderRadius.circular(10),
        ));
  }
}

OutlineButton

OutlineButton - 自帶邊框的按鈕,不能設置背景色color

class DD extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new OutlineButton(
      onPressed: () {
        print(BorderStyle.values);
      },
      borderSide: BorderSide(
          color: Colors.blue,
          width: 2.0,
          style: BorderStyle.solid
      ),
      child: new Text('pressed'),
    );
  }
}

MaterialButton

MaterialButton - MD 風格的按鈕,屬性同上,但是可以設置寬高值

class DD extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialButton(
      minWidth: 200,
      height: 80,
      color: Colors.blue,
      textColor: Colors.white,
      onPressed: () {
        print("AAAAAA");
      },
      child: new Text('button'),
    );
  }
}

IconButton

IconButton - 在 Icon 基礎上加上點擊事件,不能設置背景色和邊框,圖就沒必要放了,child除了可以接受Icon之外,還可以接受RichText

class DD extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IconButton(
        onPressed: () {
          print("AAAAAA");
        },
        color: Colors.red,
        iconSize: 50,
        icon: new Icon(Icons.star),
        padding: const EdgeInsets.all(12.0)
    );
  }
}

FloatingActionButton

基本設置

FloatingActionButton 這個大家都是耳熟能詳了吧,如果有時間,可以看看:FlatButton的Material設計理念,這是官方指導,FloatingActionButton 所有典型應用案例都在里面了,雖說是英文的,但是大家看圖就知道咋回事了圖隨便找的

  • child 很隨意,可以是 Text、icon, etc
  • tooltip 長按提示
  • foregroundColor child 沒有設置顏色時生效
  • backgroundColor 背景色
  • elevation 陰影
  • highlightElevation 按下時陰影
  • shape 形狀,設置shape時,默認的elevation將會失效,默認為CircleBorder
  • mini 是小圖標還是大圖標
  • heroTag hero效果使用的tag,系統默認會給所有FAB使用同一個tag,方便做動畫效果
  • isExtended 是否為”extended”類型
@override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      child: Icon(Icons.adb),
      tooltip: "tips",
      backgroundColor: Colors.blueAccent,
      foregroundColor: Colors.amberAccent,
      onPressed: (){
        print("tips!");
      },
    );
  }

FloatingActionButton 3種樣式

  • regular
  • mini
  • extended 擴展

regularmini 就是按鈕大小的事,通過 min true/false 就能切換,但是 extended 就得借助 FloatingActionButton.extended 這個專門的構造函數了,其樣式是 icon 在前,文字在后,沒有 child 標簽了,而是 icon 和 label 了

FloatingActionButton 定位問題

android 的 FloatingActionButton 是可以定位的,Flutter 也一樣,甚至還可以和頂部的 ActionBar 底部的 BottomNavigationBar 聯動,經典的樣式就是這樣:

一共有6個位置:

  • 一般定位:

  • endFloat 右小角,距離底部有一定距離

  • endDocked 右小角,頂著底部顯示

  • centerFloat 居中下至,距離底部有一定距離

  • 聯動定位:

  • startTop 左上角,距離左邊有一定距離,錨定 ActionBar 中間

  • endTop 右上角,距離右邊有一定距離,錨定 ActionBar 中間

  • centerDocked 居中下至,錨定 BottomNavigationBar 中間

BottomNavigationBar 聯動的例子

return new Scaffold(
      floatingActionButton: new Builder(builder: (BuildContext context) {
        return new FloatingActionButton(
          child: const Icon(Icons.add),
          tooltip: "Hello",
          heroTag: null,
          foregroundColor: Colors.white,
          backgroundColor: Colors.black,
          elevation: 7.0,
          highlightElevation: 14.0,
        );
      }),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: new Theme(
        data: Theme.of(context).copyWith(
            // sets the background color of the `BottomNavigationBar`
            canvasColor: Colors.black12,
            // sets the active color of the `BottomNavigationBar` if `Brightness` is light
            primaryColor: Colors.red,
            textTheme: Theme.of(context)
                .textTheme
                .copyWith(caption: new TextStyle(color: Colors.white))),
        child: new BottomNavigationBar(
          fixedColor: Colors.lightBlue,
          items: [
            new BottomNavigationBarItem(
                icon: new Icon(Icons.home), title: new Text("每日干貨")),
            new BottomNavigationBarItem(
              icon: new Icon(Icons.category),
              title: new Text("分類閱讀"),
            ),
            new BottomNavigationBarItem(
              icon: new Icon(Icons.whatshot),
              title: new Text("匠心寫作"),
            ),
            new BottomNavigationBarItem(
              icon: new Icon(Icons.search),
              title: new Text("搜索"),
            ),
          ],
          type: BottomNavigationBarType.fixed,
          onTap: (int selected) {
            setState(() {
            });
          },
        ),
      ),
    );

ButtonBar

這個比較簡單

  • alignment 布局方向,默認 MainAxisAlignment.end
  • mainAxisSize 主軸大小,默認 MainAxisSize.max
  • children

RawMaterialButton

RawMaterialButton 和上面差不舵,也是一組按鈕,沒有背景 沒有邊框 有點擊效果的按鈕。其實寫不寫都沒事,主要是讓大家認識下,別覺得沒見過

和 FlatButton 沒有什么區別


https://mp.weixin.qq.com/s/_tuD0WvOugDqdMkCblYgJQ

最多閱讀

如何有效定位Flutter內存問題? 1年以前  |  11676次閱讀
Flutter的手勢GestureDetector分析詳解 3年以前  |  7605次閱讀
Flutter插件詳解及其發布插件 2年以前  |  6293次閱讀
在Flutter中添加資源和圖片 3年以前  |  5144次閱讀
Flutter 狀態管理指南之 Provider 3年以前  |  4341次閱讀
發布Flutter開發的iOS程序 3年以前  |  4317次閱讀
Flutter for Web詳細介紹 3年以前  |  4190次閱讀
在Flutter中發起HTTP網絡請求 3年以前  |  3953次閱讀
使用Inspector檢查用戶界面 3年以前  |  3885次閱讀
Flutter Widget框架概述 3年以前  |  3261次閱讀
Flutter路由詳解 3年以前  |  3103次閱讀
JSON和序列化 3年以前  |  3026次閱讀
Flutter框架概覽 3年以前  |  2990次閱讀
推薦5個Flutter重磅開源項目! 1年以前  |  2951次閱讀
為Flutter應用程序添加交互 3年以前  |  2941次閱讀
處理文本輸入 3年以前  |  2844次閱讀
使用自定義字體 3年以前  |  2843次閱讀
編寫國際化Flutter App 3年以前  |  2831次閱讀

手機掃碼閱讀
18禁止午夜福利体验区,人与动人物xxxx毛片人与狍,色男人窝网站聚色窝
<蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>