Flutter-SingleChildScrollView在固定高度内

问题描述

我正在制作一个拆分视图小部件，可以通过拖动底部小部件来调整其比例。 问题是我想在底部放置一些大的小部件，以便在我扩展它时可以完全看到它，否则就只能部分看到它。

Split-view design here

这是我的拆分视图代码。

class HorizontalSplitView extends StatefulWidget {
  final Widget top;
  final Widget bottom;
  final double ratio;

const HorizontalSplitView(
      {Key key,@required this.top,@required this.bottom,this.ratio = 0.2})
      : super(key: key);

 @override
  _HorizontalSplitViewState createState() => _HorizontalSplitViewState();
}

class _HorizontalSplitViewState extends State<HorizontalSplitView> {
  double _ratio;
  double _maxHeight;

  get _height1 => _ratio * _maxHeight;

  get _height2 => (1 - _ratio) * _maxHeight;


@override
void initState() {
  super.initState();
   _ratio = widget.ratio;
 }

@override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context,BoxConstraints constraints) {
      _maxHeight = constraints.maxHeight;
      return SizedBox(
        height: constraints.maxHeight,child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,children: <Widget>[
            SizedBox(
              height: _height1,child: widget.top,),GestureDetector(
              behavior: HitTestBehavior.translucent,onPanUpdate: (DragUpdateDetails details) {
                setState(() {
                  _ratio += details.delta.dy / _maxHeight;
                  if (_ratio > 0.85)
                    _ratio = 0.85;
                  else if (_ratio < 0.0) _ratio = 0.0;
                });
              },onPanEnd: (DragEndDetails details) {
                setState(() {
                  if (_ratio < 0.5)
                    _ratio = 0.0;
                  else if (0.6 <= _ratio && _ratio < 0.8)
                    _ratio = 0.6;
                  else if (0.8 < _ratio) _ratio = 0.85;
                });
              },child: SizedBox(
                height: _height2,child: widget.bottom,],);
    });
  }
}

问题是，如果我将scrollchildview置于boxconstraint高度而不是大小的box小部件，则会引发溢出错误。有什么办法可以将scrollview或其他任何可以位于确定的height SizeBox小部件中的小部件放置？ 预先感谢。

解决方法

您也可以这样做，

Column(
          children: [
            Container(
              height: 200,color: Colors.orange,),Expanded(
              child: SingleChildScrollView(
                scrollDirection: Axis.vertical,child: Container(
                  color: Colors.green,)
          ],)

,

通过将布局更改为如下所示的堆栈来解决

@override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context,BoxConstraints constraints) {
      _maxHeight = constraints.maxHeight;
      return Scaffold(
        //appBar: NavigationBar(appBarKey,searchFocus),body: Stack(alignment: Alignment.bottomCenter,children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),child: Align(
              alignment: Alignment.topCenter,child: Container(
                  height: (_maxHeight - _offset.dy - 10.0) < (_maxHeight / 2)
                      ? _maxHeight / 2
                      : _maxHeight - _offset.dy - 10.0,decoration: BoxDecoration(
                    color: Colors.orange,border: Border.all(color: Colors.black),child: Center(
                    child: Text('top'),)),GestureDetector(
            onPanUpdate: (details) {
              _offset = Offset(0,_offset.dy - details.delta.dy);
              if (_offset.dy < _minHeight) {
                _offset = Offset(0,_minHeight);
              } else if (_offset.dy > _maxHeight) {
                _offset = Offset(0,_maxHeight);
              }
              setState(() {});
            },onPanEnd: (DragEndDetails details) {
              if (_offset.dy < _minHeight) {
                _offset = Offset(0,_minHeight);
              } else if (_minHeight<_offset.dy && _offset.dy<_maxHeight/2){
                _offset = Offset(0,_maxHeight/2);
              } else if (_offset.dy > _maxHeight/2) {
                _offset = Offset(0,child: AnimatedContainer(
              duration: Duration.zero,curve: Curves.easeOut,height: _offset.dy,alignment: Alignment.center,child: SingleChildScrollView(
                physics: NeverScrollableScrollPhysics(),child: ConstrainedBox(
                    constraints: BoxConstraints(
                      minHeight: _offset.dy,child: IntrinsicHeight(
                      child: Column(
                        children: [
                          Container(
                            // A fixed-height child.
                            color: Colors.black,height: 120.0,Expanded(
                            child: Container(
                              color: Colors.blue,height: 300.0,Container(
                            // A fixed-height child.
                            color: Colors.yellow,],]),);
    });
  }