动态向小部件添加项目不会更新小部件的高度

Question

当我在初始加载结束后动态地向 sliding_up_panel widget 添加一个小部件时，面板的高度不会增加，这意味着面板底部被裁剪，我会收到 A RenderFlex overflowed by 27 pixels on the bottom. 错误。

请问我应该怎么做才能确保在这种情况下面板更新其高度？

复现步骤

通过 condition ? widget : widget 逻辑动态地向面板添加小部件。例如：

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("SlidingUpPanelExample"),
        ),
        body: Stack(
          children: <Widget>[
            Center(child: Text("This is the Widget behind the sliding panel"),),

            SlidingUpPanel(
              panel: Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    myFirstVariable ? Text("This is a sliding Widget") : Container(),
                    mySecondVariable ? Text("This is another sliding Widget") : Container(),
                  ],
                ),
              )
            )
          ],
        )
    );
  }

非常感谢！

- hardanger

---

在你的问题中添加最小可复现代码是个好主意（不需要整个代码，只需要代码片段，这样任何有兴趣回答你问题的人都可以获取并粘贴代码进行审查）。 - yaguarete

太好了，@yaguarete，谢谢。我已经添加了一个。 - hardanger

@hardanger，很遗憾，仅使用slidinguppanel无法实现此功能。您必须在SlidingUpPanel下的widget树中添加滚动行为。我已经添加了一个答案，并附加了所需更改的额外说明。 - Abdelkrim Bournane

Answer 1

SlidingUpPanel小部件不会根据其子级调整其高度。

解决问题的方法是将SingleChildScrollView添加到面板内容中，并使用panelBuilder而不是panel属性。

panelBuilder通过提供控制器，帮助管理滚动和滑动冲突，使您能够将其馈送给SingleChildScrollView，您的代码将更改如下：

    @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("SlidingUpPanelExample"),
        ),
        body: Stack(
          children: <Widget>[
            Center(child: Text("This is the Widget behind the sliding panel"),),
            SlidingUpPanel(
              panelBuilder:(sc) => SingleChildScrollView(
                controller: sc,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    myFirstVariable ? Text("This is a sliding Widget") : Container(),
                    mySecondVariable ? Text("This is another sliding Widget") : Container(),
                  ],
                ),
              )
            )
          ],
        )
    );
  }

这样，您就不会遇到任何溢出问题，当面板内容溢出时，SingleChildScrollView将变得可滚动。

- Abdelkrim Bournane

---

虽然不是完美的解决方案，但接受它是最清晰的。非常感谢！ - hardanger

Answer 2

希望这能帮到你：

1. 使用控制器,

您可以根据列表中的项目（0.0至1.0）控制面板的高度。确保在添加新项目后更新UI。

2. 使用列表

这将解决您提到的renderOverflow问题。

  /// just for the example
  List<Widget> items = <Widget>[];

  //adding items
  addItem() {
    items.add(Container(
      constraints: BoxConstraints(maxHeight: 200, minHeight: 200),
      color: Color((Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0),
    ));

    /// if you know in advance the height of the widgets been rendered: 200
    /// if you know in advance the height of the panel: 500, or context.size.height / 2 (which would be 50% of screen) asume 600
    ///
    /// increase panel height panel according to the number of items
    ///
    _pc.panelPosition =
        (items.length * 200) / 600 > 1.0 ? 1 : (items.length * 200) / 600;

    /// Hey
    /// SET State after adding the item
    /// to refresh UI
  }

  Widget _scrollingList(ScrollController sc) {
    return ListView.builder(
      controller: sc,
      itemCount: items.length,
      itemBuilder: (context, index) {
        return items[index];
      },
    );
  }

  PanelController _pc = new PanelController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("SlidingUpPanelExample"),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: addItem,
        ),
        body: Stack(
          children: <Widget>[
            Center(
              child: Text("This is the Widget behind the sliding panel"),
            ),
            SlidingUpPanel(
              controller: _pc,
              panelBuilder: (ScrollController sc) => _scrollingList(sc),
            ),
          ],
        ));

- yaguarete

Answer 3

插件具有以下方法：minHeight和maxHeight来完成工作。我认为在不设置这些属性的情况下动态更改它是不可能的。

- Maikzen