親愛的小伙伴們,最近一直在寫項目,有一段時間沒有發干貨了, 趁flutter版本升級,推出全新的一系列的按鈕,來冒泡一下.

Flutter 1.22版本新增了3個按鈕，TextButton、OutlinedButton、ElevatedButton，雖然以前的Button沒有被廢棄，但flutter團隊以后也不更新它們,只會停留在現階段.強烈建議使用新的Button。

為什么會新增 Button？因為想要將以前的按鈕調整為統一的外觀比較麻煩，三種按鈕都是用同一種ButtonTheme,而不能分別自定義他們的主題, 因此以前經常使用自定義的按鈕，而新增的按鈕解決了此類問題，三種按鈕對應三種不同的主題,可以非常方便的設置整體外觀。

image.png

還有一個原因,我猜是,以前的按鈕的設計思路,用起來很不方便,比喻要給按鈕設置一個背景色,這個是常見的需求吧
你得套一層Container,利用Container的顏色來實現,如下

            Container(
              color: Colors.blue,
              child: FlatButton(
                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                onPressed: () {
                  print("-----");
                },
                // padding: EdgeInsets.all(10),
                child: Text("登錄"),
                minWidth: 1,
                height: 30,
                // padding: EdgeInsets.zero,
              ),
            )

image.png

現在新的按鈕是直接可以設置前景色,背景色,直接提供了此類的屬性(backgroundColor,foregroundColor等),一個是方便設置,一個是不用嵌套一層,代碼看起來更舒服.

如下:

           TextButton(
             onPressed: () {
               print("-----");
             },
             child: Text("登錄"),
             style: ButtonStyle(
                 minimumSize: MaterialStateProperty.all(Size(100, 30)),
                 padding: MaterialStateProperty.all(EdgeInsets.zero),
                 backgroundColor: MaterialStateProperty.all(Colors.grey),
             ),
           ),

效果

image.png

回到正題,如何去掉button默認的邊距呢,讓按鈕包裹內容呢.

分別寫上對應的代碼

TextButton(
              onPressed: () {
                print("-----");
              },
              child: Text("登錄"),
              style: ButtonStyle(
                minimumSize: MaterialStateProperty.all(Size(1, 1)),
                padding: MaterialStateProperty.all(EdgeInsets.zero),
                backgroundColor: MaterialStateProperty.all(Colors.grey),
              ),
            ),
            Container(
              color: Colors.blue,
              child: FlatButton(
                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                onPressed: () {
                  print("-----");
                },
                // padding: EdgeInsets.all(10),
                child: Text("登錄"),
                minWidth: 1,
                padding: EdgeInsets.zero,
              ),
            )

效果如下

image.png

解釋一下,新的button好實現,只需要設置屬性就可以了,讓它的size最小,并設置邊距為0;

minimumSize: MaterialStateProperty.all(Size(1, 1)),
padding: MaterialStateProperty.all(EdgeInsets.zero),

flatButton它們要實現邊距為0就比較難了.最終通過各種探索,找到一個實現方法,MaterialTapTargetSize.shrinkWrap,讓內容緊裹,并且邊距為0,實現起來沒有TextButton實現起來直觀明了.
如下

materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
padding: EdgeInsets.zero,

結尾

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

補充一下

還有一種去掉邊距的做法，就是利用主題來做
舊button就有buttonTheme，新button，就有對應的主題textButtonTheme。。。，具體見另一文章有詳細介紹flutter TextButton OutlinedButton ElevatedButton基本使用

代碼如下：

image.png

buttonTheme: ButtonThemeData(
              minWidth: 0,
              height: 0,
              padding: EdgeInsets.zero,
              materialTapTargetSize: MaterialTapTargetSize.shrinkWrap),
          textButtonTheme: TextButtonThemeData(
              style: ButtonStyle(
                  minimumSize: MaterialStateProperty.all(Size.zero),
                  padding: MaterialStateProperty.all(EdgeInsets.zero),
                  tapTargetSize: MaterialTapTargetSize.shrinkWrap))),