在flutter中向listview小部件的底部添加一个按钮

问题描述 投票:3回答:1

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

这是构建该类的当前代码:

@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});
            }
          }
      ),
    ),
  ),
);
dart flutter
1个回答
8
投票

更改您的构建列表函数以包含一个按钮和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
            )
         ])
}
© www.soinside.com 2019 - 2024. All rights reserved.