Flutter小部件的大小取决于另一个小部件
Flutter小部件的大小取决于另一个小部件
我目前正在尝试在Flutter中创建一个自定义小部件。
在元素列表的右侧添加一个简单的“A到Z滚动器”，以便跳转到索引位置。
我的问题是，实际上我需要使用列表小部件的大小来确定字母的字体大小。
示例如下：
我将列表作为子项添加到自定义类中，以从上下文中获取其高度。我尝试在“build”方法中使用context.size.height来获取大小，但是由于小部件尚未构建，所以出现错误。然后，我尝试执行一个异步方法，就像我在这里阅读到的一样。唯一可以在没有错误的情况下获取context.size.height的位置是在手势检测器的onVerticalDragUpdate中。
这是我的实际代码：
class _MyHomePageState extends State
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: new AtoZSlider(child: _buildList()),
);
}
}
Widget _buildList() { //测试列表
return ListView.builder(
padding: EdgeInsets.all(8.0),
itemExtent: 20.0,
itemCount: 1000,
itemBuilder: (BuildContext context, int index) {
return Text('entry $index');
},
);
}
class AtoZSlider extends StatefulWidget {
final Widget child;
AtoZSlider({this.child});
@override
_AtoZSlider createState() => new _AtoZSlider();
}
class _AtoZSlider extends State
double _offsetContainer;
double _heightScroller;
bool _isHeightSetup;
var _text;
var _alphabet;
@override
void initState() {
super.initState();
_offsetContainer = 0.0;
_isHeightSetup = false;
_heightScroller = 14.0; //我想用上下文大小计算的默认值
_alphabet = [
'#',
'A',
'B',
'C',
'D',
'E',
'F',
'G',
'H',
'I',
'J',
'K',
'L',
'M',
'N',
'O',
'P',
'Q',
'R',
'S',
'T',
'U',
'V',
'W',
'X',
'Y',
'Z'
];
_text = _alphabet[0];
}
@override
Widget build(BuildContext context) {
return Stack(alignment: Alignment.topRight, children: [
widget.child,
GestureDetector(
child: Container(
child: Text(_text, style: new TextStyle(fontSize: _heightScroller),),
height: _heightScroller,
margin: EdgeInsets.only(top: _offsetContainer)),
onVerticalDragUpdate: (DragUpdateDetails details) {
setState(() {
if ((_offsetContainer + details.delta.dy) >= 0 &&
(_offsetContainer + details.delta.dy) <=
(context.size.height - _heightScroller)) { //通过使用context.size.height在垂直轴上移动我的滚动器，而不超出范围
_offsetContainer += details.delta.dy;
}
});
},
)
]);
}
}
有没有办法根据“列表大小高度”初始化我的“小部件文本字体大小”？
非常感谢任何形式的帮助。
问题的原因是Flutter中的widget不能依赖于另一个widget的大小，但是可以依赖于constraints（约束）。为了解决这个问题，可以使用LayoutBuilder来获取约束，并根据约束构建widget。
在上述代码中，通过使用LayoutBuilder，可以根据constraints的大小来构建widget。如果constraints的宽度大于100，就返回一个Text('Hello')，否则返回一个Container()。
有人提出了一个问题，希望能让列表填充一个容器，并且获取列表的高度。可以通过使用constraints来实现这一点。在LayoutBuilder中，constraints.biggest表示整个body的大小，可以根据这个大小来设置列表的高度。
另外，还可以使用百分比来设置widget的大小，例如让一个widget占据body的一定比例等等。感谢Rémi Rousselet的提问和回答。
通过使用LayoutBuilder，可以根据约束动态地构建widget，而不是硬编码地设置大小。这样可以更好地适应不同尺寸的屏幕，实现响应式的布局。
