在 flutter 中实现浮动操作按钮等功能

Question

如何通过固定在底部、列表上方并且列表在颤动中滚动来实现此功能？提前致谢！！！

Answer 1

你可以使用 FloatingActionButton.extended() 并在其中创建 Row 然后用 GestureDetector 包裹你的 Row 以捕获 onTap.

示例：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Floating Action Button Extended"),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {},
        backgroundColor: Colors.white,
        label: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            GestureDetector(
              onTap: () {
                print('button 1');
              },
              child: Row(
                children: [
                  Padding(
                    padding: const EdgeInsets.only(right: 5.0),
                    child: Icon(
                      Icons.verified_user,
                      color: Colors.purple,
                    ),
                  ),
                  Text(
                    'Me',
                    style: TextStyle(
                      fontSize: 15,
                      color: Colors.purple,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(width: 30),
            GestureDetector(
              onTap: () {
                print('button 2');
              },
              child: Row(
                children: [
                  Padding(
                    padding: const EdgeInsets.only(right: 5.0),
                    child: Icon(
                      Icons.qr_code,
                      color: Colors.purple,
                    ),
                  ),
                  Text(
                    'Scan',
                    style: TextStyle(
                      fontSize: 15,
                      color: Colors.purple,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

结果：

Answer 2

这样做就可以了：

Scaffold(
      extendBody: true,
      bottomNavigationBar: Container(
        margin: EdgeInsets.only(left: MediaQuery.of(context).size.width/2 - 100, right: MediaQuery.of(context).size.width/2 - 100, bottom: 20),
        height: 60,
        decoration: BoxDecoration(
          borderRadius: const BorderRadius.all(Radius.circular(10.0)),
          color: Color.fromRGBO(249, 125, 27, 1),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            IconButton(
              icon: Icon(
                Icons.home,
                color: Colors.white,
              ),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(
                Icons.people_alt,
                color: Colors.white,
              ),
              onPressed: () {},
            ),
          ],
        ),
      ),

在 flutter 中实现浮动操作按钮等功能

achieve functionality like floating action button in flutter

widget

dart

flutter

statefulwidget