CustomScrollView 中的 Flutter 固定按钮答案

【问题标题】：Flutter Fixed Button in CustomScrollViewCustomScrollView 中的 Flutter 固定按钮
【发布时间】：2019-01-09 16:14:45
【问题描述】：

如何在CustomScrollView的底部制作一个按钮固定“粘滞”

如何实现如截图 https://i.stack.imgur.com/RDCn9.png

【问题讨论】：

您可以将 Stack() 与定位的小部件一起使用。
您至少尝试过什么吗？ Containers and Columns 和 Align 小部件呢？ medium.com/jlouage/flutter-row-column-cheat-sheet-78c38d242041
因为我的问题表明“CustomScrollView”，所以在 CustomScrollView 中只接受条子，而不是你提到的

标签： dart flutter flutter-sliver

【解决方案1】：

一种方法 - 使用 - BottomNavigationBar

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>\[
          SliverAppBar(
            title: Text('Sliver App Bar'),
            expandedHeight: 125.0,
          ),
          SliverList(
              delegate: SliverChildBuilderDelegate((context, int) {
            return Text('Boo');
          }, childCount: 65)),
          SliverFillRemaining(
            child: Text('Foo Text'),
          ),
        \],
      ),
      bottomNavigationBar: Padding(
        padding: EdgeInsets.all(8.0),
        child: RaisedButton(
          onPressed: () {},
          color: Colors.blue,
          textColor: Colors.white,
          child: Text('Fixed Button'),
        ),
      ),
    );
  }][1]][1]

输出：

【讨论】：

如果键盘显示，如何向上推固定按钮？
尽管这是一个纯粹的“hack”，但它与 CustomScrollView 完美配合，当用户滚动时它仍然存在。
@WaleedAlrashed 我知道这是一个旧答案，但为什么这会被视为“黑客”？除了导航按钮之外，BottomNavigationBar 的正常用例还有哪些？

【解决方案2】：

您可以使用floatingActionButton 和floatingActionButtonLocation

考试：

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        floatingActionButton: FloatingActionButton.extended(
          onPressed: () {},
          isExtended: true,
          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
          icon: Icon(Icons.supervised_user_circle),
          label: Text('Fixed Button'),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        body: CustomScrollView(
          slivers: <Widget>[
            const SliverAppBar(
              pinned: true,
              expandedHeight: 250.0,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('Demo'),
              ),
            ),
            SliverGrid(
              gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 200.0,
                mainAxisSpacing: 10.0,
                crossAxisSpacing: 10.0,
                childAspectRatio: 4.0,
              ),
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return Container(
                    alignment: Alignment.center,
                    color: Colors.teal[100 * (index % 9)],
                    child: Text('grid item $index'),
                  );
                },
                childCount: 20,
              ),
            ),
            SliverFixedExtentList(
              itemExtent: 50.0,
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return Container(
                    alignment: Alignment.center,
                    color: Colors.lightBlue[100 * (index % 9)],
                    child: Text('list item $index'),
                  );
                },
              ),
            ),
          ],
        ));
  }
}

【讨论】：

【解决方案3】：

Scaffold(
      body: 
      // list view here
      bottomNavigationBar: GestureDetector(
  child: Container(
    height: 50,
    width: 325,
    child: Center(
      child: Text(
        "title",
      ),
    onTap: (){},
  ),
);

这对我来说是一种解决方法

【讨论】：

我反对这种变通方法，有很多替代方案，例如浮动按钮或小部件，而您在这里使用的脚手架属性应该用于其他目的。
使用bottomNavigationBar就像一个浮动操作按钮。每个屏幕都使用脚手架
Scaffold 有一个 floatingActionButton 属性，如果你想将它用作父亲小部件，那就是 api.flutter.dev/flutter/material/Scaffold-class.html