Flutter 1.22版本新增了3個按鈕,TextButton OutlinedButton ElevatedButton.有的小伙伴可能奇怪,已經(jīng)有了FlatButton RaiseButton FloatingActionButton,為什么還要新增3個button呢,至于原因,在我的上一篇文章開頭,講得很清楚了.需要了解的小伙伴可以去看看為什么要新增三個按鈕. 這里不再贅述.我們直接開始分享一些新增按鈕的基本用法.

首先看一下flutter SDK給我們的api都有哪些

按住command鍵,從TextButton進(jìn)入sdk文檔,新增加了一個ButtonStyle 類型的style, 繼續(xù)點進(jìn)去就能看到更多信息

class ButtonStyle with Diagnosticable {
  /// Create a [ButtonStyle].
  const ButtonStyle({
    this.textStyle,
    this.backgroundColor,
    this.foregroundColor,
    this.overlayColor,
    this.shadowColor,
    this.elevation,
    this.padding,
    this.minimumSize,
    this.side,
    this.shape,
    this.mouseCursor,
    this.visualDensity,
    this.tapTargetSize,
    this.animationDuration,
    this.enableFeedback,
  });

我們知道已經(jīng)給我們提供了backgroundColor屬性,細(xì)心的小伙伴發(fā)現(xiàn)讓我們傳進(jìn)去的類型是MaterialStateProperty<Color> .不再是我們熟悉的Colors.red這種類型.第一次看到要傳入這類型,難免心慌.但我們靜下來想想,要傳MaterialStateProperty<T>,無非要知道MaterialStateProperty的構(gòu)造方法,如果知道了它是怎么創(chuàng)建的,那么返回的就是MaterialStateProperty<T>這個類型了吧. 繼續(xù)按著MaterialStateProperty進(jìn)入sdk就能看到

abstract class MaterialStateProperty<T> {

  /// Returns a value of type `T` that depends on [states].
  ///
  /// Widgets like [TextButton] and [ElevatedButton] apply this method to their
  /// current [MaterialState]s to compute colors and other visual parameters
  /// at build time.
  T resolve(Set<MaterialState> states);

  /// Resolves the value for the given set of states if `value` is a
  /// [MaterialStateProperty], otherwise returns the value itself.
  ///
  /// This is useful for widgets that have parameters which can optionally be a
  /// [MaterialStateProperty]. For example, [InkWell.mouseCursor] can be a
  /// [MouseCursor] or a [MaterialStateProperty<MouseCursor>].
  static T resolveAs<T>(T value, Set<MaterialState> states) {
    if (value is MaterialStateProperty<T>) {
      final MaterialStateProperty<T> property = value;
      return property.resolve(states);
    }
    return value;
  }

  /// Convenience method for creating a [MaterialStateProperty] from a
  /// [MaterialPropertyResolver] function alone.
  static MaterialStateProperty<T> resolveWith<T>(MaterialPropertyResolver<T> callback) => _MaterialStatePropertyWith<T>(callback);

  /// Convenience method for creating a [MaterialStateProperty] that resolves
  /// to a single value for all states.
  static MaterialStateProperty<T> all<T>(T value) => _MaterialStatePropertyAll<T>(value);
}

我們可以看到上面的代碼里面提供了3個靜態(tài)方法(static),可以方便創(chuàng)建MaterialStateProperty<T>類型.

static T resolveAs<T>(T value, Set<MaterialState> states) 
static MaterialStateProperty<T> resolveWith<T>(MaterialPropertyResolver<T> callback)
static MaterialStateProperty<T> all<T>(T value)

三個方法中,最簡單的是第三個方法

static MaterialStateProperty<T> all<T>(T value)

也就是說如果我按下面寫

MaterialStateProperty.all(Colors.red)

會得到MaterialStateProperty<Color>類型的東西.這樣剛好可以傳給MaterialStateProperty<Color> backgroundColor.

切入正題,上代碼

TextButton(
              onPressed: () {
                print("-----");
              },
              child: Text("登錄"),
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.grey),
                foregroundColor: MaterialStateProperty.all(Colors.white)
              ),
            )

設(shè)置了背景色,前景色,效果如下圖

截屏2020-11-17 16.44.17.png

下面我們再來一個比較綜合的實例

TextButton(
              onPressed: () {
                print("-----");
              },
              child: Text("登錄"),
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.grey),
                foregroundColor: MaterialStateProperty.all(Colors.white),
                textStyle: MaterialStateProperty.all(TextStyle(fontSize: 30)),
                // shape: MaterialStateProperty.all(OutlinedBorder(side: BorderSide(color: Colors.red))),
                shape: MaterialStateProperty.all(RoundedRectangleBorder(
                    side: BorderSide(color: Colors.red, width: 10),
                    borderRadius: BorderRadius.circular(25))),
                side: MaterialStateProperty.all(
                    BorderSide(color: Colors.purple, width: 3)),
              ),
            ),

運行效果如下

image.png

我們來理一下里面的坑

// shape: MaterialStateProperty.all(OutlinedBorder(side: BorderSide(color: Colors.red))),

第一個坑
雖然shape,要傳入的是OutlinedBorder類型的,但是如果像上面這樣傳進(jìn)去,會報錯的. 仔細(xì)分析下,可以看出OutlinedBorder是抽象類, 需要用它的子類來作為參數(shù),我這里是傳了RoundedRectangleBorder,當(dāng)然還可以傳別的子類

第二個坑

image.png

紅色的代碼并沒有生效,而是紫色的代碼真正起作用了,邊框顏色為紫色,寬度為3

一個注意點
textStyle的使用大家知道怎么使用就好了,但背景色,前景色不在textStyle里面.

結(jié)尾

今天的分享先到這里了,感覺對小伙伴們有點幫助的話,歡迎點贊,加關(guān)注哦，后面會分享更多干貨~~好運!!!