Flutter 底部浮动按钮(模仿咸鱼APP底部)，阿里技术专家深入讲解

在Flutter中，你可以使用Stack和Align来创建一个底部浮动的按钮，如果你想模仿钉钉或者虾鱼的底部浮动按钮，可以使用FloatingActionButton配合Scaffold。以下是一个简单的示例代码：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('内容'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 处理点击事件
        },
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            IconButton(icon: Icon(Icons.home), onPressed: () {}),
            IconButton(icon: Icon(Icons.mail_outline), onPressed: () {}),
            IconButton(icon: Icon(Icons.message), onPressed: () {}),
          ],
        ),
      ),
    );
  }
}

在这个示例中，floatingActionButton属性提供了底部浮动的按钮，而floatingActionButtonLocation设置了按钮的位置。BottomAppBar则用于创建底部的固定栏，其中shape属性定义了一个圆形的槽。这样就模拟出了钉钉或者虾鱼等应用底部浮动按钮的效果。