Flutter创建圆圈图标按钮(2)

padding: EdgeInsets.all(15.0),

shape: CircleBorder(),

)

您可以尝试一下，它是完全可定制的。

ClipOval(

child: Material(

color: Colors.blue, // button color

child: InkWell(

splashColor: Colors.red, // inkwell color

child: 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来做到这一点：

响应触摸的材料的矩形区域。

下面的示例演示如何使用InkWell。**注意：**您不需StatefulWidget要这样做。我用它来改变计数状态。

例：

import ‘package:flutter/material.dart’;

class SettingPage extends StatefulWidget {

@override

_SettingPageState createState() => new _SettingPageState();

}

class _SettingPageState extends State {

int _count = 0;

@override

Widget 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 height

decoration: 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，请使用材料类型为circle的小部件highlightColor包装InkWell小Material部件。然后decoration在Container小部件中删除。

结果：

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一起使用。设置backgroundImage属性。

CircleAvatar(

backgroundImage: NetworkImage(userAvatarUrl),

)

按钮示例：

《设计思想解读开源框架》

第一章、 热修复设计

• 第一节、 AOT/JIT & dexopt 与 dex2oat

• 第二节、 热修复设计之 CLASS_ISPREVERIFIED 问题

• 第三节、热修复设计之热修复原理

• 第四节、Tinker 的集成与使用（自动补丁包生成）

  

  第二章、 插件化框架设计

• 第一节、 Class 文件与 Dex 文件的结构解读

• 第二节、 Android 资源加载机制详解

• 第三节、 四大组件调用原理

• 第四节、 so 文件加载机制

• 第五节、 Android 系统服务实现原理

  

  第三章、 组件化框架设计

• 第一节、阿里巴巴开源路由框——ARouter 原理分析

• 第二节、APT 编译时期自动生成代码&动态类加载

• 第三节、 Java SPI 机制

• 第四节、 AOP&IOC

• 第五节、 手写组件化架构

  

  第四章、图片加载框架

• 第一节、图片加载框架选型

• 第二节、Glide 原理分析

• 第三节、手写图片加载框架实战

  

  第五章、网络访问框架设计

• 第一节、网络通信必备基础

• 第二节、OkHttp 源码解读

• 第三节、Retrofit 源码解析

  

  第六章、 RXJava 响应式编程框架设计

• 第一节、链式调用

• 第二节、 扩展的观察者模式

• 第三节、事件变换设计

• 第四节、Scheduler 线程控制

  

  第七章、 IOC 架构设计

• 第一节、 依赖注入与控制反转

• 第二节、ButterKnife 原理上篇、中篇、下篇

• 第三节、Dagger 架构设计核心解密

  

  第八章、 Android 架构组件 Jetpack

• 第一节、 LiveData 原理

• 第二节、 Navigation 如何解决 tabLayout 问题

• 第三节、 ViewModel 如何感知 View 生命周期及内核原理

• 第四节、 Room 架构方式方法

• 第五节、 dataBinding 为什么能够支持 MVVM

• 第六节、 WorkManager 内核揭秘

• 第七节、 Lifecycles 生命周期

  
  本文包含不同方向的自学编程路线、面试题集合/面经、及系列技术文章等，资源持续更新中…
  
  《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
  架构方式方法**

• 第五节、 dataBinding 为什么能够支持 MVVM

• 第六节、 WorkManager 内核揭秘

• 第七节、 Lifecycles 生命周期

  [外链图片转存中…(img-msGO4Atb-1714871504526)]
  本文包含不同方向的自学编程路线、面试题集合/面经、及系列技术文章等，资源持续更新中…
  [外链图片转存中…(img-jyLcMGfq-1714871504527)]
  《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！