当我显示重叠元素时，如何使页面可滚动显示? [英] How to make my page scrollable when i show overlay element, that have too many items in flutter?
问题描述
我创建了一个自定义的下拉窗口小部件，以从列表中选择一个选项，然后从本地json文件中加载它. 当此下拉字段位于屏幕底部时，由于使用了叠加元素，因此无法显示选项. 您能帮我吗，我该如何解决htis问题?
I have created a custom dropdown widget, to select one option form a list that i load it from local json file. When this dropdown field is at the bottom of the screen, the options can not be displayed, because of using overlay element. Can you help me, how can I solve htis issue?
这是我的自定义下拉列表
Here is my custom dropdown
import 'package:flutter/material.dart';
class CustomDropdown extends StatefulWidget {
final TextEditingController controller;
final List<Map> items;
final String label;
final String value;
const CustomDropdown({Key key, @required this.controller, @required this.items, this.label, this.value}) : super(key: key);
@override
_CustomDropdownState createState() => _CustomDropdownState();
}
class _CustomDropdownState extends State<CustomDropdown> {
final FocusNode _focusNode = FocusNode();
OverlayEntry _overlayEntry;
final LayerLink _layerLink = LayerLink();
bool isOpened = false;
@override
void initState() {
super.initState();
widget.controller.text = widget.value;
_focusNode.addListener(() {
if (_focusNode.hasFocus) {
this._overlayEntry = this._createOverlayEntry();
Overlay.of(context).insert(this._overlayEntry);
} else {
this._overlayEntry.remove();
}
});
}
OverlayEntry _createOverlayEntry() {
RenderBox renderBox = context.findRenderObject();
var size = renderBox.size;
var offset = renderBox.localToGlobal(Offset.zero);
return OverlayEntry(
// opaque: true,
builder: (context) => Positioned(
// left: offset.dx,
// top: offset.dy + size.height + 5.0,
width: size.width,
child: CompositedTransformFollower(
link: this._layerLink,
showWhenUnlinked: false,
offset: Offset(0.0, size.height + 5.0),
child: Material(
elevation: 12.0,
child: ListView.builder(
padding: EdgeInsets.zero,
scrollDirection: Axis.vertical,
shrinkWrap: true, // new line
// physics: NeverScrollableScrollPhysics(), // new line
itemCount: widget.items.length,
itemBuilder: (_, index) {
return ListTile(
title: Column(
children: [
SizedBox(
height: 20,
),
Text(widget.items[index]["text"]),
SizedBox(
height: 20,
),
Divider()
],
),
onTap: () {
print("${widget.items[index]["text"]} Tapped");
setState(() {
_focusNode.unfocus();
widget.controller.text = widget.items[index]["text"];
});
},
);
},
),
),
),
),
);
}
@override
Widget build(BuildContext context) {
return CompositedTransformTarget(
link: this._layerLink,
child: TextFormField(
controller: widget.controller,
readOnly: true,
// initialValue: 'Test',
focusNode: this._focusNode,
decoration: InputDecoration(
labelText: widget.label.toUpperCase(),
isDense: true,
),
),
);
}
}
以及我在这里使用它的地方:
and here where i use it:
Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Wollen Sie Ihr Profile mit einem Passwort schützen?'.toUpperCase(),
style: TextStyle(fontSize: 20.0, color: theme.inputTextColor),
),
Padding(
padding: const EdgeInsets.only(top: 15.0),
child: _buildFaceIdOptions(),
),
Padding(
padding: const EdgeInsets.only(top: 15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'FaceID verwenden',
style: TextStyle(fontSize: 18.0),
),
_buildToggleButton()
],
),
),
SizedBox(
height: 20,
),
Padding(
padding: const EdgeInsets.only(top: 15.0),
child: _buildPassword(),
),
SizedBox(
height: 20,
),
Padding(
padding: const EdgeInsets.only(top: 15.0),
child: _buildRepeatPassword(),
),
SizedBox(
height: 20,
),
Padding(padding: const EdgeInsets.only(top: 15.0), child: CustomDropdown(controller: questionController, items: _questionList, label: 'Sicherheitsfrage', value: '',)),
SizedBox(
height: 20,
),
// Padding(
// padding: const EdgeInsets.only(top: 15.0),
// child: _buildPassword(),
// ),
SizedBox(
height: 120,
)
],
),
)
推荐答案
您可以使叠加层"中的列表可滚动.
You can make the list inside the Overlay scrollable.
您必须在OverlayEntry内的Positioned小部件中设置所有可能的值，否则其内容将无法滚动:如果设置 width ，则还必须设置 top ，底部和左侧(或右侧，但不能同时阅读两者，请阅读定位的小部件规范").
You have to set all possible values in the Positioned widget inside OverlayEntry otherwise its content won't be scrollable: if you set width then you have to also set top, bottom and left (or right but not both, read the Positioned widget specifications for that).
设置这些值后，定位的"窗口小部件内容将可滚动.
Once you set those values the Positioned widget contents will be scrollable.
这篇关于当我显示重叠元素时，如何使页面可滚动显示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
