flutter 上滑面板中的页脚隐藏内容

oxcyiej7 于 2023-03-13 发布在 Flutter

关注(0)|答案(1)|浏览(142)

我使用sliding_up_panel小部件沿着footer属性来显示底部的一些底部。问题是面板的内容隐藏在页脚内容后面。我尝试按照文档中的建议添加填充，但似乎没有给予预期的结果。
以下是小部件文档的摘要。
页脚：可选的永久性构件，浮动在面板上方并附加到面板底部。面板底部的内容将被此构件覆盖。请在面板底部添加填充以避免覆盖。

SlidingUpPanel(
  backdropEnabled: true,
  color: Colors.transparent,
  minHeight: 140,
  maxHeight: 300,
  parallaxEnabled: true,
  footer: SizedBox(
    width: MediaQuery.of(context).size.width,
    child: Padding(
      padding: const EdgeInsets.all(10.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(
            width: double.infinity,
            child: ElevatedButton(
              onPressed: () {},
              child: Text("Subscribe"),
            ),
          ),
          Row(
            children: [
              Expanded(
                child: ElevatedButton(
                  onPressed: () {},
                  child: Text("Chat"),
                ),
              ),
              SizedBox(width: 10),
              Expanded(
                  child: ElevatedButton(
                onPressed: () {},
                child: Text("Learn More"),
              ))
            ],
          ),
        ],
      ),
    ),
  ),
  panel: Padding(
    padding: const EdgeInsets.only(bottom: 90.0),
    child: Container(
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(30),
          topRight: Radius.circular(30),
        ),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Padding(
            padding: const EdgeInsets.all(20),
            child: Container(
              width: 40,
              height: 3,
              decoration: const BoxDecoration(
                color: Colors.black,
                borderRadius: BorderRadius.all(
                  Radius.circular(10),
                ),
              ),
            ),
          ),
          Align(
            alignment: Alignment.topLeft,
            child: Padding(
              padding: const EdgeInsets.only(
                left: 20,
                right: 20,
              ),
              child: Column(
                crossAxisAlignment:
                    CrossAxisAlignment.start,
                children: [
                  Text("Main Heading"),
                  Text("Sub Heading"),
                  Text(
                      "Text area 1 Text area 1 Text area 1 Text area 1 Text area 1 Text area 1 Text area 1 Text area 1 Text area 1 Text area 1 Text area 1 Text area 1 Text area 1"),
                  Text("Text area 2"),
                  Text("Text area 3"),
                ],
              ),
            ),
          ),
        ],
      ),
    ),
  ),
)

输出如下图所示：

面板关闭

您可以注意到文本隐藏在按钮后面。

面板打开

我试着在面板中添加底部填充。当面板打开时，这会在面板底部添加灰色区域。
请帮助防止此文本被隐藏在按钮后面。

flutter

来源：https://stackoverflow.com/questions/75702645/footer-in-sliding-up-panel-hiding-content

1条答案

按热度按时间

fcy6dtqo1#

我认为底部填充只能在**面板打开时帮助使内容可见。当它关闭时，您需要顶部填充-您可以添加，但在这种情况下，当您打开面板时，填充也会在那里。
所以你可以尝试的是保持面板的打开/关闭状态，并根据这个状态调整内容。
在state类中创建成员变量：

double _panelPosition = 0;

向SlidingUpPanel添加回调函数以跟踪状态：

SlidingUpPanel(
   onPanelSlide: (position) => setState(() => _panelPosition = position),
  ...
)

现在您可以根据面板位置显示/隐藏内容，将包含“Main Heading，Sub Heading”等的Column Package 为Visibility小部件：

child: Visibility(
  visible: _panelPosition > 0,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [<your text widgets>],
  ),
),

或者，您可以使用AnimatedOpacity来使其更平滑：

child: AnimatedOpacity(
  opacity: _panelPosition,
  duration: const Duration(milliseconds: 200),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [<your text widgets>],
  ),
),

或者使用动态变化的顶部填充，如果面板打开，顶部填充将达到0（使用Expanded和SingleChildScrollView以避免溢出）：

Expanded(
  child: SingleChildScrollView(
    child: Align(
      alignment: Alignment.topLeft,
      child: Padding(
        padding: const EdgeInsets.only(
          left: 20,
          right: 20,
        ),
        child: Padding(
          padding: EdgeInsets.only(
              top: 100 - _panelPosition * 100),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [<your text widgets>],
          ),
        ),
      ),
    ),
  ),
),

你可以微调aboce版本来控制什么时候开始显示内容等等。
注意：上述代码将导致在您打开面板期间多次重建。如果您想避免它，您可以使用bool变量代替double，并且只跟踪完全关闭（position == 0）和完全打开（position == 1）状态。当然，在这种情况下您不能使用AnimatedOpacity。

赞(0）回复(0）举报 2023-03-13

我来回答

flutter 上滑面板中的页脚隐藏内容

1条答案

相关问题

热门标签

最新问答