Flutter Bottom Sheet:用户与表格互动时如何更改高度 [英] Flutter Bottom Sheet: How to change height when user interacts with the sheet

问题描述

在我的flutter应用程序中，我有一个底部页面，该页面的初始高度显示为100.当用户与其互动时(例如，可能是500或全屏显示)，我想增加该页面的高度手势检测或单击工作表上的按钮)

In my flutter application I have a bottom sheet which gets shown with some initial height say 100. I would like to increase the height of the sheet (say may be 500 or go full screen) when user interacts with it (may be a gesture detection or clicking on a button on the sheet)

是否可以在装入纸张后更改其高度.

Is it possible to change the height of the sheet after it is loaded.

我的底页就像

  Widget _bottomSheetContainer(BuildContext context) {
    return Container(
        height: 100,
        decoration: BoxDecoration(
            border:
                Border(top: BorderSide(color: Theme.of(context).dividerColor))),
        child: Row(children: [
          Expanded(
            child:  Padding(
              padding: EdgeInsets.all(10.0),
              child: Text('Some text here!'),
            )
          ),
          Expanded(
            child: IconButton(
                icon: Icon(Icons.arrow_upward),
                // color: themeData.primaryColor,
                onPressed: () => _onPressed(context)
            ),
          ),
        ]));
  }

  _onPressed(BuildContext context) {
    BottomSheet w = context.widget;
    // Can we change the container height (from 100 to 500) that's part of the bottom sheet from here?

  }

推荐答案

您需要确保您的小部件为

You would need to make sure your widget is stateful widget, then you can update it's instance parameters using setState(() => ...), and flutter will update the rendered results.

class _WidgetState extends State<Widget> {
  double height = 200.0; // starting height value

  Widget build() { 
    <...>
    Container(
        height: height,
    <...>
  }

  _onPressed(BuildContext context) {
      BottomSheet w = context.widget;
      // Can we change the container height (from 100 to 500) that's part of the bottom sheet from here?
      setState({
        height = 300.0; // new height value
      })
  }

}

这篇关于Flutter Bottom Sheet:用户与表格互动时如何更改高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！