js css html

flutter技巧

2022-07-01  本文已影响0人  你飞跃俊杰

showModalBottomSheet

  1. 无法直接设置圆角;
    使用stack包裹住子组件解决圆角的问题,且需要设置背景颜色为Colors.balck54,这个颜色是bottomsheet弹出时系统的默认颜色
                 showModalBottomSheet(
                    context: context,
                    builder: (BuildContext bc) {
                      return Stack(
                        children: <Widget>[
                          Container(
                            height: 30.0,
                            width: double.infinity,
                            color: Colors.black54,
                          ),
                          Container(
                            decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.only(
                                  topLeft: Radius.circular(25),
                                  topRight: Radius.circular(25),
                                )),
                          ),
                          Container(
                            child: FlatButton(
                              child: Container(
                                alignment: Alignment.center,
                                padding:
                                    EdgeInsets.only(top: 33.0, bottom: 33.0),
                                child: Text(
                                  "bottomSheet的内容",
                                ),
                              ),
                            ),
                          ),
                        ],
                      );
                    });
  1. 组件最多只能撑满半屏幕,再多就出界了;
    系统的bottomSheet最大高度是屏幕的一半,原因是源码里面限制了最大高度:
maxHeight: constraints.maxHeight * 9.0 / 16.0,
  1. 在这个组件里面如果有选择按钮等其他一些需要改变状态的组件时,即便使用setState,状态也无法更新。
    在bottomSheet里面如果有需要更改状态的组件,例如CheckBox的选中、未选中状态,这时setState发现bottomSheet本身没有更新。
    使用evenbus,在bottomSheet里面需要更新的地方发射更新信息,在拷贝出的系统源码中加入listen即可
@override
  void initState() {
    super.initState();
 
    Manager.instance.eventBus.on<RefreshBottomSheetEvent>().listen((event) {
      setState(() {
      });
    });
  }

fire消息的代码:

Manager.instance.eventBus.fire(RefreshBottomSheetEvent());

这个event:

class RefreshBottomSheetEvent {
  RefreshBottomSheetEvent();
}
上一篇 下一篇

猜你喜欢

热点阅读