Flutter中CustomScrollView中如何固定按钮

Question

如何使按钮在CustomScrollView底部固定“粘性”

如何实现下面截图中的效果 https://istack.dev59.com/RDCn9.webp

- essayoub

---

你可以使用一个 Stack() 和一个 positioned 的 widget。 - Rubens Melo

你尝试过什么吗？容器、列和对齐小部件怎么样？https://medium.com/jlouage/flutter-row-column-cheat-sheet-78c38d242041 - Victor Hugo Montes

由于我的问题指示了“CustomScrollView”，因此只有sliver可以在CustomScrollView内部接受，而不是您提到的内容。 - essayoub

Answer 1

使用 BottomNavigationBar 的一种方法 - One Way of Doing it

  @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]

输出：

- anmol.majhail

---

如果键盘显示，我该如何将固定按钮向上推？ - Emre Akcan

尽管这只是一个纯粹的“hack”，但它与CustomScrollView完美配合，当用户滚动时它仍然存在。 - Waleed Alrashed

@WaleedAlrashed 我知道这是一个旧答案，但为什么会被认为是“hack”？除了用作导航按钮之外，BottomNavigationBar 的正常用例是什么？ - Igor Lima

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

- EdHuamani

Answer 3

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

这对我来说是一个解决方法。

- Phanindra

---

我反对这种解决方法，有很多其他的替代方案，比如浮动按钮或小部件，而你在这里使用了一个本应用于其他目的的脚手架属性。 - Romeo

使用bottomNavigationBar就像使用浮动操作按钮一样。而Scaffold用于每个屏幕。 - Phanindra

Scaffold有一个floatingActionButton属性，如果你想将其用作父部件，那么这就是正确的方法。https://api.flutter.dev/flutter/material/Scaffold-class.html - Romeo

这是比使用FloatingActionButton更好的解决方案。 - Samaludheen

Answer 4

你可以使用 Expanded widget 来包装你的可滚动小部件。它会占用所需的空间并留下剩余的空间用于按钮。以下是我用来使按钮同时固定在顶部和底部的方法。

Column(
            children: [
              //This is button 1
              Padding(
                padding: allPadding,
                child: GestureDetector(
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => const myPage(),
                      ),
                    );
                  },
                  child: Container(
                    height: 40,
                    width: MediaQuery.of(context).size.width,
                    decoration: BoxDecoration(
                        color: Colors.green,
                        borderRadius: BorderRadius.circular(4)),
                    child: const Center(
                      child: Text(
                        "Button Name",
                        style: TextStyle(
                            color: Colors.white, fontWeight: FontWeight.bold),
                      ),
                    ),
                  ),
                ),
              ),
              
              //Here's my Scrollable widget
              Expanded(
                child: Center(
                  child: ListView.builder(
                    itemCount: provider.myList.length,
                    itemBuilder: (BuildContext context, index) {
                      return myCard(
                        provider: provider,
                        widgetTextStyle: widgetTextStyle,
                        index: index,
                      );
                    },
                  ),
                ),
              ),


             //this is the same button used as above
              Padding(
                padding: allPadding,
                child: GestureDetector(
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => const myPage2(),
                      ),
                    );
                  },
                  child: Container(
                    height: 40,
                    width: MediaQuery.of(context).size.width,
                    decoration: BoxDecoration(
                        color: Colors.green,
                        borderRadius: BorderRadius.circular(4)),
                    child: const Center(
                      child: Text(
                        "Button 2",
                        style: TextStyle(
                            color: Colors.white, fontWeight: FontWeight.bold),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),

- Anush Karki