在 flutter 中實現浮動操作按鈕等功能

Question

如何通過固定在底部、列表上方和列表在 flutter 中滾動來實現此功能？ 提前致謝！！！

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: () {},
            ),
          ],
        ),
      ),