在 Flutter 中实现浮动操作按钮等功能-解网

问：

我怎样才能在底部、列表上方固定并且列表在 Flutter 中滚动时实现此功能？提前致谢!!

Flutter dart widget 有状态小部件

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,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

结果：

0赞 Jim 4/20/2021 #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: () {},
            ),
          ],
        ),
      ),

上一个：tcard 没有重置，在 tcardController.state Flutter 中为 null

下一个：Flutter - 无法在此 ChangeLocation Widget 上方找到正确的 Provider<Provider>

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

achieve functionality like floating action button in flutter

评论