我想做的是顯示一個任務串列并在底部有按鈕讓用戶選擇他們想要的功能但是當資料變得很多并且我的按鈕被推到螢屏下方時，我希望按鈕能夠無論生成多少資料，都停留在螢屏上，按鈕不會被按下，按鈕也不會阻擋資料的視覺效果，我在下面有一張圖片來展示 這里的例子
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:fyp/assignment/ViewComplete.dart';
import 'ReassignEmployee.dart';
import 'ViewAssigned.dart';
import 'ViewUnassigned.dart';
class assignmentPage extends StatefulWidget {
const assignmentPage({Key? key}) : super(key: key);
@override
State<assignmentPage> createState() => _assignmentPageState();
}
class _assignmentPageState extends State<assignmentPage> {
TextEditingController searchController = TextEditingController();
String searchText = '';
String id = '';
CollectionReference allNoteCollection =
FirebaseFirestore.instance.collection('Assignment');
List<DocumentSnapshot> documents = [];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('View Assignment'),
),
body: SingleChildScrollView(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
TextField(
controller: searchController,
onChanged: (value) {
setState(() {
searchText = value;
});
},
decoration: InputDecoration(
hintText: 'Search...',
prefixIcon: Icon(Icons.search),
),
),
StreamBuilder(
stream: allNoteCollection.snapshots(),
builder: (ctx, streamSnapshot) {
if (streamSnapshot.connectionState ==
ConnectionState.waiting) {
return Center(
child: CircularProgressIndicator());
}
documents = streamSnapshot.data!.docs;
if (searchText.length > 0) {
documents = documents.where((element)
{
return
( element.get('carPlate').toString().
toLowerCase().contains(searchText.toLowerCase()) ||
element.get('custName').toString().
toLowerCase().contains(searchText.toLowerCase())||
element.get('date').toString().
toLowerCase().contains(searchText.toLowerCase())||
element.get('employee').toString().
toLowerCase().contains(searchText.toLowerCase())||
element.get('id').toString().
toLowerCase().contains(searchText.toLowerCase())||
element.get('payment').toString().
toLowerCase().contains(searchText.toLowerCase())||
element.get('serviceName').toString().
toLowerCase().contains(searchText.toLowerCase())||
element.get('status').toString().
toLowerCase().contains(searchText.toLowerCase())||
element.get('timeEnd').toString().
toLowerCase().contains(searchText.toLowerCase())||
element.get('timeStart').toString().
toLowerCase().contains(searchText.toLowerCase())
);
}).toList();
}
return ListView.separated(
reverse: true,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: documents.length,
separatorBuilder: (BuildContext context, int index) {
return Divider();
},
itemBuilder: (BuildContext context, int index) {
id = documents[index]['id'];
return ListTile(
contentPadding:
EdgeInsets.symmetric(horizontal: 0.0),
onTap: () {
},
title: Column(
children: <Widget>[
Text(documents[index]['carPlate']),
Text(documents[index]['custName']),
Text(documents[index]['date']),
Text(documents[index]['employee']),
Text(documents[index]['payment']),
Text(documents[index]['serviceName']),
Text(documents[index]['status']),
Text(documents[index]['timeStart']),
Text(documents[index]['timeEnd']),
],
),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
InkWell(
onTap: (){
Navigator.push(context,
MaterialPageRoute(builder: (context) => ReassignEmployee(
serviceName: documents[index]['serviceName'],
carPlate: documents[index]['carPlate'],
custName: documents[index]['custName'],
date: documents[index]['date'],
timeStart: documents[index]['timeStart'],
timeEnd: documents[index]['timeEnd'],
payment: documents[index]['payment'],
status: documents[index]['status'],
employee: documents[index]['employee'],
id: documents[index]['id'],
)));
},child: Icon(Icons.edit),
),
],
)
);
},
);
},
),
ElevatedButton(
onPressed: () async {
Navigator.push(context,
MaterialPageRoute(builder: (context) => ViewUnassigned(id: id.toString(),)));
},
child: Text('Show unassigned'),
),
ElevatedButton(
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => ViewAssigned()));
},
child: Text('Show assigned'),
),
],
),
),
);
}
}
不知道怎么弄，希望高手指點一下，萬分感謝
uj5u.com熱心網友回復：
您可以使用Stack并Positioned固定buttons到螢屏底部，如下所示：
class assignmentPage extends StatefulWidget {
const assignmentPage({Key? key}) : super(key: key);
@override
State<assignmentPage> createState() => _assignmentPageState();
}
class _assignmentPageState extends State<assignmentPage> {
TextEditingController searchController = TextEditingController();
String searchText = '';
String id = '';
CollectionReference allNoteCollection =
FirebaseFirestore.instance.collection('Assignment');
List<DocumentSnapshot> documents = [];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('View Assignment'),
),
body: Stack(
children: [
SingleChildScrollView(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
TextField(
controller: searchController,
onChanged: (value) {
setState(() {
searchText = value;
});
},
decoration: InputDecoration(
hintText: 'Search...',
prefixIcon: Icon(Icons.search),
),
),
StreamBuilder(
stream: allNoteCollection.snapshots(),
builder: (ctx, streamSnapshot) {
if (streamSnapshot.connectionState ==
ConnectionState.waiting) {
return Center(child: CircularProgressIndicator());
}
documents = streamSnapshot.data!.docs;
if (searchText.length > 0) {
documents = documents.where((element) {
return (element
.get('carPlate')
.toString()
.toLowerCase()
.contains(searchText.toLowerCase()) ||
element
.get('custName')
.toString()
.toLowerCase()
.contains(searchText.toLowerCase()) ||
element
.get('date')
.toString()
.toLowerCase()
.contains(searchText.toLowerCase()) ||
element
.get('employee')
.toString()
.toLowerCase()
.contains(searchText.toLowerCase()) ||
element
.get('id')
.toString()
.toLowerCase()
.contains(searchText.toLowerCase()) ||
element
.get('payment')
.toString()
.toLowerCase()
.contains(searchText.toLowerCase()) ||
element
.get('serviceName')
.toString()
.toLowerCase()
.contains(searchText.toLowerCase()) ||
element
.get('status')
.toString()
.toLowerCase()
.contains(searchText.toLowerCase()) ||
element
.get('timeEnd')
.toString()
.toLowerCase()
.contains(searchText.toLowerCase()) ||
element
.get('timeStart')
.toString()
.toLowerCase()
.contains(searchText.toLowerCase()));
}).toList();
}
return ListView.separated(
reverse: true,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: documents.length,
separatorBuilder: (BuildContext context, int index) {
return Divider();
},
itemBuilder: (BuildContext context, int index) {
id = documents[index]['id'];
return ListTile(
contentPadding:
EdgeInsets.symmetric(horizontal: 0.0),
onTap: () {},
title: Column(
children: <Widget>[
Text(documents[index]['carPlate']),
Text(documents[index]['custName']),
Text(documents[index]['date']),
Text(documents[index]['employee']),
Text(documents[index]['payment']),
Text(documents[index]['serviceName']),
Text(documents[index]['status']),
Text(documents[index]['timeStart']),
Text(documents[index]['timeEnd']),
],
),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
ReassignEmployee(
serviceName: documents[index]
['serviceName'],
carPlate: documents[index]
['carPlate'],
custName: documents[index]
['custName'],
date: documents[index]
['date'],
timeStart: documents[index]
['timeStart'],
timeEnd: documents[index]
['timeEnd'],
payment: documents[index]
['payment'],
status: documents[index]
['status'],
employee: documents[index]
['employee'],
id: documents[index]['id'],
)));
},
child: Icon(Icons.edit),
),
],
));
},
);
},
),
],
),
),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Column(
children: [
ElevatedButton(
onPressed: () async {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ViewUnassigned(
id: id.toString(),
)));
},
child: Text('Show unassigned'),
),
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ViewAssigned()));
},
child: Text('Show assigned'),
),
],
))
],
),
);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/534980.html
標籤：扑按钮布局固定的流生成器