在flutter中将按钮添加到列表视图小部件的底部

Question

我目前在整个屏幕上都有一个列表视图。我希望在屏幕底部有一个按钮，以便将其拆分，以便列表视图不会填满整个窗口。

这是构建类的当前代码：

@override
Widget build(BuildContext context) {
  return Scaffold(
  appBar: AppBar(
    title: Text('HT scoreboard'),
  ),
  body: _buildBody(context),
);
}

Widget _buildBody(BuildContext context) {
return StreamBuilder<QuerySnapshot>(
  stream: Firestore.instance.collection('Spillere').orderBy("score", descending: true).snapshots(),
  builder: (context, snapshot) {
    if (!snapshot.hasData) return LinearProgressIndicator();

    return _buildList(context, snapshot.data.documents);
  },
);
}

  Widget _buildList(BuildContext context, List<DocumentSnapshot> snapshot) {
return ListView(
  padding: const EdgeInsets.only(top: 10.0),
  children: snapshot.map((data) => _buildListItem(context, data)).toList(),
);
}

Widget _buildListItem(BuildContext context, DocumentSnapshot data) {
final record = Record.fromSnapshot(data);

return Padding(
  key: ValueKey(record.name),
  padding: const EdgeInsets.all(5.0),
  child: Container(
    decoration: BoxDecoration(
      border: Border.all(color: Colors.grey),
      borderRadius: BorderRadius.circular(5.0),
    ),
    child: ListTile(
      title: Text(record.name + ": " + record.score.toString()),
      trailing: new IconButton(icon: new Icon(isAdmin ? Icons.add : null, color: Colors.green),
          onPressed: (){
            if(isAdmin){
              record.reference.updateData({'score': record.score + 1});
            }
          }
      ),
    ),
  ),
);

Answer 1

更改您的构建列表功能，以将包含按钮和listview的列作为子元素

Widget _buildList(BuildContext context, List<DocumentSnapshot> snapshot) {
    return Column(
        children:[
            Expanded(
            child: ListView(
                   padding: const EdgeInsets.only(top: 10.0),
                   children: snapshot.map((data) => _buildListItem(context, data)).toList(),
                   ),
            ),
            RaisedButton(
            // fill in required params
            )
         ])
}

Answer 2

防止按键被推到键盘上方；

return CustomScrollView(
  slivers: <Widget>[
    SliverToBoxAdapter(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          // list items
        ],
      ),
    ),
    SliverFillRemaining(
      hasScrollBody: false,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: <Widget>[
          RaisedButton()
        ],
      ),
    )
  ],
);