固定了AppBar和SingleChildScrollView（Flutter）之间的按钮

Question

我想在AppBar和ListView之间包含按钮。在下面的示例中，按钮与文本一起滚动。我试图将SingleChildScrollView包含在列中，但未成功。

我了解到Column小部件不支持滚动。我已经进行了很多搜索，但是没有找到与我所需的示例相似的示例。

有人可以帮我吗？

  @override
  Widget build(BuildContext context) {
      return new Scaffold(
        appBar: new AppBar(
          title: new Text('A Idade do Lobo'),
          elevation: 0.0,
          backgroundColor: COLOR_MAIN,
        ),
        body: NotificationListener(
          onNotification: (notif) {
            if (_hasScroll) {
              if (notif is ScrollEndNotification && scrollOn) {
                Timer(Duration(seconds: 1), () {
                  _scroll();
                  setState(() {
                    _controlButton();
                  });
                });
              }
            }
            return true;
          },
          child: SingleChildScrollView(
            controller: _scrollController,
            child: new Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                new Center(
                  child: new Row(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      new RaisedButton(
                        onPressed: _showScrollPickerDialog,
                        child: Text('Rolagem ${_scrollSpeed}'),
                      ),
                      new RaisedButton(
                        onPressed: _showTomPickerDialog,
                        child: Text('TOM ${_tom}'),
                      ),
                    ],
                  ),
                ),
                new Flexible(
                  fit: FlexFit.loose,
                  child: new ListView.builder(
                    shrinkWrap: true,
                    itemCount: _songDetails.length,
                    itemBuilder: (context, index) {
                      return new Column(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Padding(
                            padding: new EdgeInsets.all(5.0),
                            child: new RichText(
                              text: TextSpan(children: [
                                new TextSpan(
                                  text: '${_songDetails[index].line}',
                                  style: _getStyle(
                                    _songDetails[index].type,
                                  ),
                                ),
                              ]),
                            ),
                          ),
                        ],
                      );
                    },
                  ),
                ),
              ],
            ),
          ),
        ),
        floatingActionButton: _controlButton(),
      );
    }
  }

Answer 1

您可以正确使用AppBar的底部来实现所需的UI。

下面的例子可以使你明白。

import 'package:flutter/material.dart';

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

  @override
  _DeleteWidgetState createState() => _DeleteWidgetState();
}

class _DeleteWidgetState extends State<DeleteWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("your title"),
          bottom: PreferredSize(
            preferredSize: Size(MediaQuery.of(context).size.width, 40),
            child: Center(
              child: new Row(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  new RaisedButton(
                    onPressed: () {},
                    child: Text('Rolagem '),
                  ),
                  new RaisedButton(
                    onPressed: () {},
                    child: Text('TOM '),
                  ),
                ],
              ),
            ),
          ),
        ),
        body: Container(
          child: ListView.builder(
            itemBuilder: (context, int index) {
              return Text(index.toString());
            },
            itemCount: 100,
          ),
        ));
  }
}