Flutter带文本与图标的圆形按钮及底部布局按钮实现咨询

嘿，刚好有做过类似的需求，给你分享两种按钮的实现方式，都是用Flutter原生组件就能搞定的，不用额外加依赖~

要把按钮固定在屏幕底部，最省心的方式是利用Scaffold的bottomNavigationBar属性，或者用Align组件配合底部对齐来定位。这里推荐用TextButton.icon快速实现带图标文字的按钮，再调整样式贴近Android的设计风格：

Scaffold(
  body: const Center(child: Text('主内容区域')),
  bottomNavigationBar: Padding(
    // 给按钮加个边距，避免贴死屏幕边缘
    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
    child: TextButton.icon(
      icon: const Icon(Icons.add, color: Colors.white),
      label: const Text('添加内容', style: TextStyle(color: Colors.white)),
      style: TextButton.styleFrom(
        backgroundColor: Colors.blueAccent, // 用Android常用的主题色
        padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8), // 圆角设计，贴近Android按钮风格
        ),
      ),
      onPressed: () {
        // 这里写按钮点击逻辑
        print('底部按钮被触发');
      },
    ),
  ),
)

如果不想占用bottomNavigationBar（比如已经用它做底部导航了），可以用Align组件把按钮单独固定在底部：

Align(
  alignment: Alignment.bottomCenter,
  child: Padding(
    padding: const EdgeInsets.all(16),
    child: TextButton.icon(
      // 上面的样式和内容直接复用即可
      icon: const Icon(Icons.add, color: Colors.white),
      label: const Text('添加内容', style: TextStyle(color: Colors.white)),
      style: TextButton.styleFrom(
        backgroundColor: Colors.blueAccent,
        padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
      ),
      onPressed: () {},
    ),
  ),
)

额外小技巧：如果需要图标在上、文字在下的布局，直接把TextButton.icon换成Column+InkWell组合就行，灵活性更高：

InkWell(
  onTap: () {},
  borderRadius: BorderRadius.circular(8), // 点击水波纹的圆角
  child: Container(
    padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
    decoration: BoxDecoration(
      color: Colors.blueAccent,
      borderRadius: BorderRadius.circular(8),
    ),
    child: const Column(
      mainAxisSize: MainAxisSize.min, // 让Column只占内容大小
      children: [
        Icon(Icons.add, color: Colors.white),
        SizedBox(height: 4), // 图标和文字之间的间距
        Text('添加内容', style: TextStyle(color: Colors.white)),
      ],
    ),
  ),
)

圆形按钮的核心是设置组件的shape为CircleBorder()，再配合Row或Column来排列图标和文字：

1. 图标+文字横向排列的圆形按钮 #

用ElevatedButton就能快速实现，自带阴影效果：

ElevatedButton(
  onPressed: () {
    print('圆形分享按钮被点击');
  },
  style: ElevatedButton.styleFrom(
    shape: const CircleBorder(), // 关键：设置圆形形状
    padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
    backgroundColor: Colors.green,
  ),
  child: const Row(
    mainAxisSize: MainAxisSize.min, // 让Row只占内容大小
    children: [
      Icon(Icons.share, color: Colors.white),
      SizedBox(width: 8), // 图标和文字的间距
      Text('分享', style: TextStyle(color: Colors.white)),
    ],
  ),
)

2. 图标+文字纵向排列的圆形按钮 #

把Row换成Column即可，适合文字较短的场景：

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    shape: const CircleBorder(),
    padding: const EdgeInsets.all(16),
    backgroundColor: Colors.orange,
  ),
  child: const Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Icon(Icons.favorite, color: Colors.white),
      SizedBox(height: 4),
      Text('收藏', style: TextStyle(color: Colors.white, fontSize: 12)),
    ],
  ),
)

自定义进阶：如果需要更细致的样式控制（比如调整水波纹效果），可以用Material+InkResponse的组合：

Material(
  color: Colors.purple,
  shape: const CircleBorder(),
  child: InkResponse(
    onTap: () {},
    containedInkWell: true,
    highlightShape: BoxShape.circle, // 高亮效果也是圆形
    child: const Padding(
      padding: EdgeInsets.symmetric(horizontal: 24, vertical: 18),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(Icons.edit, color: Colors.white),
          SizedBox(width: 6),
          Text('编辑', style: TextStyle(color: Colors.white)),
        ],
      ),
    ),
  ),
)

这些方案都是基于Flutter原生组件实现的，你可以根据需求自由调整颜色、大小、间距这些参数，适配不同的业务场景~

内容的提问来源于stack exchange，提问作者Daniel Mana