Flutter之Button，寬度佔滿螢幕，四周帶icon的Button

天玉發表於2019-06-13
Flutter

一、Button寬度佔滿螢幕或自定義

Flutter為我們提供了各式各樣的Button,包括FlatButton、RaisedButton、OutlineButton、RaisedButton.icon、FlatButton.icon、OutlineButton.icon......等，而這些Button都是直接或間接繼承於MaterialButton，在MaterialButton基礎上封裝了一下屬性，或擴充了一下child屬性增加了icon。 但是，當我們用FlatButton、RaisedButton 、OutlineButton時發現Button的寬度是包裹內容的，那怎麼能讓寬度佔滿螢幕或自定義大小呢？

方案一：直接使用MaterialButton

我們看下MaterialButton中提供了2個屬性：minWidth和height，我們直接設定這2個屬性的寬度或者高度就可以，如果想寬度佔滿全屏可以直接設定成double.infinity，如下：

MaterialButton(
  onPressed: () {},
  child: Text("寬度佔滿了"),
  minWidth: double.infinity,
  height: 50.0,
  color: Colors.green,
  textColor: Colors.white,
 )
複製程式碼

WechatIMG2.png

方案二：設定在ButtonTheme中設定寬度

我們看到MaterialButton原始碼中的寬高有這樣一句話

/// Defaults to the value from the current [ButtonTheme].
final double minWidth;
複製程式碼

可以知道Button預設的寬高是來源於ButtonTheme,其實MaterialButton的許多屬性的預設值都來源於ButtonTheme，所以我們直接全域性設定這個就好了，如下：

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        buttonTheme: ButtonThemeData(minWidth: double.infinity, height: 50.0),
      ),
      home: SplashPage(),
    );
  }
}
複製程式碼

這樣所有你用的Button，不管是FlatButton、RaisedButton、OutlineButton還是MaterialButton都預設成寬度最大，高度50了，大家根據具體情況去做就好了。

方案三：在Button之外再套一層控制大小

這種情況可直接使用FlatButton、RaisedButton、OutlineButton如下：

SizedBox(
  width: double.infinity,
  height: 50,
  child: RaisedButton(
    onPressed: () {},
    child: Text("寬度佔滿了"),
    color: Colors.green,
    textColor: Colors.white,
  ),
),
複製程式碼

當然不止SizedBox可以控制大小，其他能設定寬高的佈局widget也可以，大家視情況而定就好了。如Container，下面這個寬度佔滿，距左右邊距20。

Container(
  width: double.infinity,
  height: 50,
  padding: EdgeInsets.only(left: 20,right: 20),
  child: RaisedButton(
    onPressed: () {},
    child: Text("寬度佔滿了"),
    color: Colors.green,
    textColor: Colors.white,
  ),
)
複製程式碼

二、自定義Button，支援文字上下左右帶icon

我們看下RaisedButton.icon、FlatButton.icon、OutlineButton.icon這些的icon都是怎麼加上的，原始碼：

class _FlatButtonWithIcon extends FlatButton with MaterialButtonWithIconMixin {
  _FlatButtonWithIcon({
    Key key,
    @required VoidCallback onPressed,
    ...
    ...
    MaterialTapTargetSize materialTapTargetSize,
    @required Widget icon,
    @required Widget label,
  }) : assert(icon != null),
       assert(label != null),
       super(
         key: key,
         onPressed: onPressed,
         ...
         ...
         materialTapTargetSize: materialTapTargetSize,
         child: Row(
           mainAxisSize: MainAxisSize.min,
           children: <Widget>[
             icon,
             const SizedBox(width: 8.0),
             label,
           ],
         ),
       );

}
複製程式碼

其實很簡單，就是定義了個icon，然後，把這個icon和label用Row給包起來了，照這樣我們可以定義任何按鈕裡面的佈局了，可以放任何東西進去。 於是，我們先自定義一個類似於Android中Button，支援android:drawableLeft，android:drawableTop,android:drawableRight,android:drawableBottom,如下：

import 'package:flutter/material.dart';

///
/// Create by Hugo.Guo
/// Date: 2019-06-13
///
class FullIconButton extends MaterialButton with MaterialButtonWithIconMixin {
  FullIconButton({
    Key key,
    @required VoidCallback onPressed,
    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 highlightElevation,
    double disabledElevation,
    ShapeBorder shape,
    Clip clipBehavior = Clip.none,
    FocusNode focusNode,
    MaterialTapTargetSize materialTapTargetSize,
    Duration animationDuration,
    double minWidth,
    double height,
    Widget leftIcon,
    Widget topIcon,
    Widget rightIcon,
    Widget bottomIcon,
    EdgeInsetsGeometry textPadding,
    Widget label,
  })  : assert(elevation == null || elevation >= 0.0),
        assert(highlightElevation == null || highlightElevation >= 0.0),
        assert(disabledElevation == null || disabledElevation >= 0.0),
        super(
          key: key,
          onPressed: onPressed,
          onHighlightChanged: onHighlightChanged,
          textTheme: textTheme,
          textColor: textColor,
          disabledTextColor: disabledTextColor,
          color: color,
          disabledColor: disabledColor,
          focusColor: focusColor,
          hoverColor: hoverColor,
          highlightColor: highlightColor,
          splashColor: splashColor,
          colorBrightness: colorBrightness,
          elevation: elevation,
          highlightElevation: highlightElevation,
          disabledElevation: disabledElevation,
          shape: shape,
          clipBehavior: clipBehavior,
          focusNode: focusNode,
          materialTapTargetSize: materialTapTargetSize,
          animationDuration: animationDuration,
          minWidth: minWidth,
          height: height,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Offstage(
                offstage: topIcon == null,
                child: topIcon,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Offstage(
                    offstage: leftIcon == null,
                    child: leftIcon,
                  ),
                  Padding(
                    padding: textPadding,
                    child: label,
                  ),
                  Offstage(
                    offstage: rightIcon == null,
                    child: rightIcon,
                  ),
                ],
              ),
              Offstage(
                offstage: bottomIcon == null,
                child: bottomIcon,
              ),
            ],
          ),
        );
}
複製程式碼

這裡建構函式裡我加了這些屬性

    double minWidth,
    double height,
    Widget leftIcon,
    Widget topIcon,
    Widget rightIcon,
    Widget bottomIcon,
    EdgeInsetsGeometry textPadding,
複製程式碼

我們可以定義寬高，上下左右圖示，還有文字和圖示的間距，這樣用起來會比較方便了。當然如果你有其他需求一樣可以自己加進去。 另外我們用了Column,Row,Offstage；Column控制豎排的widget，Row控制橫排的widget，Offstage控制icon的顯示或隱藏，Offstage有2個屬性offstage和child，其中offstage=true時Offstage就不顯示了。 下面我們用下這個FullIconButton

FullIconButton(
  label: Text("GitHub登入"),
  color: Colors.blue,
  textColor: Colors.white,
  onPressed: () {},
  minWidth: double.infinity,
  leftIcon: Image.asset(
    "images/icon_github.png",
    width: 24,
    height: 24,
    color: Colors.white,
  ),
  rightIcon: Icon(Icons.group),
  topIcon: Text("我是?"),
  bottomIcon: Text("我是?"),
  textPadding: EdgeInsets.only(left: 10, right: 10),
)
複製程式碼

效果如下：

WechatIMG3.png

當然四周定義的是widget，所以你可以放任何widget進去，不只是icon。通過這個自定義Button，我們可以定義任何我們想要的通用的widget，不明白或者遇到問題的時候檢視下原始碼是怎麼做的就可以了。

pub地址：pub.dev/packages/fu…
github地址：github.com/tianyu704/f…

總結：初學Flutter不久，也還有好多不熟悉或不懂的地方，大家遇到問題可以檢視原始碼或多跟同行交流，遇到問題總能解決的，加油。

相關文章