我正在使用以下下拉菜单(良好的用户界面):https://github.com/best-flutter/flutter_dropdown_menu(您可以克隆并打开“示例”以了解其工作原理和源代码)
我成功使用了它,但是我需要回调才能知道何时选择/更改了一个项目。
这是我当前的实现方式:
class TaskListPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new TaskListState();
}
}
const List<Map<String, dynamic>> listA = [
{"title": "aa"},
{"title": "bb"},
{"title": "cc"},
{"title": "dd"},
];
const int INDEX_A = 0;
const List<Map<String, dynamic>> listB = [
{"title": "00", "id": 0},
{"title": "01", "id": 1},
{"title": "02", "id": 2},
{"title": "03", "id": 3},
{"title": "04", "id": 4},
{"title": "05", "id": 5},
{"title": "06", "id": 6},
{"title": "07", "id": 7},
];
const int INDEX_B = 0;
class TaskListState extends State<TaskListPage>
with SingleTickerProviderStateMixin {
int activeIndex;
ScrollController scrollController;
GlobalKey globalKey;
@override
void initState() {
scrollController = new ScrollController();
globalKey = new GlobalKey();
super.initState();
}
@override
Widget build(BuildContext context) {
return new Container(
child: new Stack(
children: <Widget>[
buildFixHeaderDropdownMenu(),
],
),
);
}
void onChangeIndex(int index){
final snackBar = SnackBar(content: Text('Yay! A SnackBar!' + index.toString()));
Scaffold.of(context).showSnackBar(snackBar);
}
DropdownMenu buildDropdownMenu() {
return new DropdownMenu(maxMenuHeight: kDropdownMenuItemHeight * 10,
menus: [
new DropdownMenuBuilder(
builder: (BuildContext context) {
return new DropdownListMenu(
selectedIndex: INDEX_B,
data: listB,
itemBuilder: buildCheckItem,
);
},
height: kDropdownMenuItemHeight * listB.length),
new DropdownMenuBuilder(
builder: (BuildContext context) {
return new DropdownListMenu(
selectedIndex: INDEX_A,
data: listA,
itemBuilder: buildCheckItem,
);
},
height: kDropdownMenuItemHeight * listA.length),
]);
}
DropdownHeader buildDropdownHeader({DropdownMenuHeadTapCallback onTap}) {
return new DropdownHeader(
activeIndex: activeIndex,
onTap: onTap,
titles: [listB[INDEX_B], listA[INDEX_A]],
);
}
Widget buildFixHeaderDropdownMenu() {
return new DefaultDropdownMenuController(
child: new Column(
children: <Widget>[
buildDropdownHeader(),
new Expanded(
child: new Stack(
children: <Widget>[
new TaskListView(),//LISTVIEW HERE
buildDropdownMenu()
],
))
],
));
}
}
class TaskListView extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new _TaskListViewState();
}
}
class _TaskListViewState extends State<TaskListView> {
var tasks = <TaskItem>[];
var index = 1;
@override
void initState() {
super.initState();
_loadData(index);
}
@override
Widget build(BuildContext context) {
return ListView.separated(
itemBuilder: (context, index) {
var len = tasks.length;
debugPrint("lenght: $len and index: $index");
if (tasks.length - 1 == index) {
_loadData(index);
return Container(
alignment: Alignment.center,
padding: EdgeInsets.all(16.0),
child: SizedBox(
width: 24.0,
height: 24.0,
child: CircularProgressIndicator(strokeWidth: 2.0),
));
} else {
var item = tasks[index];
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
NewTaskPage(taskItem: tasks[index]),
),
);
},
child: Padding(
padding: EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
getDotWidgetByType(item.taskStatus),
new Container(
padding: EdgeInsets.symmetric(horizontal: 8.0),
child: new Text(
item.taskTitle,
style: new TextStyle(
color: Colors.black,
fontSize: 18,
),
),
),
getStatusTextByType(item.taskStatus),
],
),
Container(
margin: EdgeInsets.only(top: 4.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(item.taskLeader),
Text(item.taskDeadLine),
IconButton(
onPressed: () {
//Todo change priorities/and status
},
icon: Icon(Icons.gps_fixed))
],
),
)
],
),
),
);
}
},
separatorBuilder: (context, index) => Divider(height: 0.0),
itemCount: tasks.length);
}
}