Question

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

这是我的拆分视图代码。

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小部件中的小部件放置？预先感谢。

Answer 1

您也可以这样做，

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

Answer 2

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

@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, _maxHeight);
              }
              setState(() {});
            },
            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,
                            height: 120.0,
                          ),
                        ],
                      ),
                    )),
              ),
            ),
          ),
        ]),
      );
    });
  }

Flutter-SingleChildScrollView在固定高度内

2 个答案: