我找不到任何顯示如何創(chuàng)建IconButton類(lèi)似于的圓的示例FloatingActionButton。任何人都可以建議創(chuàng)建一個(gè)自定義按鈕的方式/需要什么FloatingActionButton嗎？

我認(rèn)為RawMaterialButton更適合。

RawMaterialButton(onPressed: () {},elevation: 2.0,fillColor: Colors.white,child: Icon(Icons.pause,size: 35.0,),padding: EdgeInsets.all(15.0),shape: CircleBorder(), )

您可以嘗試一下，它是完全可定制的。

ClipOval(child: Material(color: Colors.blue, // button colorchild: InkWell(splashColor: Colors.red, // inkwell colorchild: SizedBox(width: 56, height: 56, child: Icon(Icons.menu)),onTap: () {},),), )

---

輸出：

您只需要使用形狀： CircleBorder()

MaterialButton(onPressed: () {},color: Colors.blue,textColor: Colors.white,child: Icon(Icons.camera_alt,size: 24,),padding: EdgeInsets.all(16),shape: CircleBorder(), )

您可以使用InkWell來(lái)做到這一點(diǎn)：

響應(yīng)觸摸的材料的矩形區(qū)域。

下面的示例演示如何使用InkWell。**注意：**您不需StatefulWidget要這樣做。我用它來(lái)改變計(jì)數(shù)狀態(tài)。

例：

import 'package:flutter/material.dart';class SettingPage extends StatefulWidget {@override_SettingPageState createState() => new _SettingPageState(); }class _SettingPageState extends State<SettingPage> {int _count = 0;@overrideWidget build(BuildContext context) {return new Scaffold(body: new Center(child: new InkWell(// this is the one you are looking for..........onTap: () => setState(() => _count++),child: new Container(//width: 50.0,//height: 50.0,padding: const EdgeInsets.all(20.0),//I used some padding without fixed width and heightdecoration: new BoxDecoration(shape: BoxShape.circle,// You can use like this way or like the below line//borderRadius: new BorderRadius.circular(30.0),color: Colors.green,),child: new Text(_count.toString(), style: new TextStyle(color: Colors.white, fontSize: 50.0)),// You can add a Icon instead of text also, like below.//child: new Icon(Icons.arrow_forward, size: 50.0, color: Colors.black38)),),//............),),);} }

如果要利用splashColor，請(qǐng)使用材料類(lèi)型為circle的小部件highlightColor包裝InkWell小Material部件。然后decoration在Container小部件中刪除。

結(jié)果：

RawMaterialButton(onPressed: () {},constraints: BoxConstraints(),elevation: 2.0,fillColor: Colors.white,child: Icon(Icons.pause,size: 35.0,),padding: EdgeInsets.all(15.0),shape: CircleBorder(), )

記下 constraints: BoxConstraints()，這是為了不允許向左填充。

如果需要背景圖像，則可以將CircleAvatar與IconButton一起使用。設(shè)置backgroundImage屬性。

CircleAvatar(backgroundImage: NetworkImage(userAvatarUrl), )

按鈕示例：

CircleAvatar(backgroundColor: Colors.blue,radius: 20,child: IconButton(padding: EdgeInsets.zero,icon: Icon(Icons.add),color: Colors.white,onPressed: () {},),),

實(shí)際上，有一個(gè)示例如何創(chuàng)建類(lèi)似于FloatingActionButton的圓形IconButton。

Ink(decoration: const ShapeDecoration(color: Colors.lightBlue,shape: CircleBorder(),),child: IconButton(icon: Icon(Icons.home),onPressed: () {},), )

此代碼將幫助您添加按鈕而不會(huì)出現(xiàn)不必要的填充，

RawMaterialButton(elevation: 0.0,child: Icon(Icons.add),onPressed: (){},constraints: BoxConstraints.tightFor(width: 56.0,height: 56.0,),shape: CircleBorder(),fillColor: Color(0xFF4C4F5E),),

總結(jié)

以上是生活随笔為你收集整理的Flutter创建圆圈图标按钮的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。