时间戳

首页 > 解决方案 > 如何在颤动中安排边框布局？

flutter - 如何在颤动中安排边框布局？

问题描述

我正在尝试布局两个小部件。顶部是PhotoView，底部是滑块。我需要滑块占用所需的空间，其余部分由 PhotoView 占用。

我尝试使用 Column 类来包装所有内容。


 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: GestureDetector(
          onTapDown: (TapDownDetails details) {print("Tapped");}),
          child: Column(children: [
            Container(
                child: Center(
              child: Container(
                  margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
                  child: Container(
                    child: hasPermission
                        ? PhotoView(
                            imageProvider:
                                FileImage(filename)),
                          )
                        : Text("Waiting"),
                  )),
            )),
            Slider(
              min: 0,
              max: 10,
              value: 5,
              onChanged: (double value) {
                print(value);
              },
            ),
          ])),
    );
  }

问题是它在底部溢出，说“BOTTOM OVERFLOWED BY infinity PIXELS”。

我怀疑原因是 PhotoView 是无界的，列也是如此，但我需要 PhotoView 受视图高度的限制 - 滑块高度。

标签： flutterflutter-layout

解决方案

它不是无限的滑块。将顶部（间接包含 PhotoView 的容器）包裹在 Expanded ( https://docs.flutter.io/flutter/widgets/Expanded-class.html ) 中。

我建议不要手动计算高度和宽度，因为通常没有它可以实现相同的效果，然后您可以“免费”响应所有动态窗口几何形状的变化（如手机方向的变化）。

推荐阅读