Flutter SingleChildScrollView嵌套Column的滚动问题

我们有一个协议页面，上部为内容，底部为按钮，类似下图。


image.png

我们可能会这样实现

class TwoPage extends StatelessWidget {
  const TwoPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议'),
        Text('协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议'),
        Text('协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议'),
        Text('协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议'),
        Text('协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议'),
        Text('协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议'),
        Spacer(),
        Container(
          padding: EdgeInsets.all(10),
          width: double.infinity,
          child: OutlinedButton(
            onPressed: () {},
            child: Text('按钮'),
          ),
        )
      ],
    );
  }
}

运行代码后界面和例举的界面效果一致，看似没问题，但是当我们增加协议内容超过屏幕高度时。

image.png

这时会发现内容超出屏幕高度了，现在我们的需求是当内容超出高度时能连带按钮一起滚动。有人说这不简单，在外面加一个SingleChildScrollView即可。
但是当我们在Column外包裹一层SingleChildScrollView时会发现界面不见了，而且会报出这样的错误
RenderFlex children have non-zero flex but incoming height constraints are unbounded.
翻译过来的意思是，在Column里设置了非0的fex但是外层的容器高度是无限制的，也就是说SingleChildScrollView高度无法准确计算导致报错。
既然没有高度，那么我们就添加一个IntrinsicHeight去自适应高度。添加完IntrinsicHeight后界面能像我们预想的一样正常滚动，但是当我们把协议内容删减到小于屏幕时问题又出现了，按钮没有在底部。
image.png

class TwoPage extends StatelessWidget {
  const TwoPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: IntrinsicHeight(
        child: Column(
          children: [
            Text('协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议'),
            Text('协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议'),
            Text('协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议'),
            Text('协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议'),
            Text('协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议'),
            Spacer(),
            Container(
              padding: EdgeInsets.all(10),
              width: double.infinity,
              child: OutlinedButton(
                onPressed: () {},
                child: Text('按钮'),
              ),
            )
          ],
        ),
      ),
    );
  }
}

真是像极了我们平常写代码，改完这里那里又出问题。
导致这个的原因是IntrinsicHeight的外层未限制高度，所以IntrinsicHeight子View只会按实际大小给，Column的高度为Text加按钮，Spacer的高度计算为0。那么要解决这个问题只需要将IntrinsicHeight的最小高度限制成SingleChildScrollView外层widget的高度即可。

下面给出解决办法

class TwoPage extends StatelessWidget {
  const TwoPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        return SingleChildScrollView(
          child: ConstrainedBox(
            constraints: constraints.copyWith(
              minHeight: constraints.maxHeight,
              maxHeight: double.infinity,
            ),
            child: IntrinsicHeight(
              child: Column(
                children: [
                  Text('协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议'),
                  Text('协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议'),
                  Spacer(),
                  Container(
                    padding: EdgeInsets.all(10),
                    width: double.infinity,
                    child: OutlinedButton(
                      onPressed: () {},
                      child: Text('按钮'),
                    ),
                  )
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

LayoutBuilder可以拿到父组件的约束，然后在IntrinsicHeight外层添加约束，最小高度为LayoutBuilder父组件约束的高度，最大高度不做限制。
我们还可以将上面的代码抽成一个常用组件，传入一个contentWidget和一个bottomWidget，contentWidget为滚动的内容，默认占满父组件大小，bottomWidget底部显示，内容超过父组件大小时跟随滚动。

import 'package:flutter/material.dart';

class ContentContainer extends StatelessWidget {
  final Widget? contentWidget;
  final Widget? bottomWidget;
  final bool isScrollable;
  final Clip? childClipBehavior;

  const ContentContainer(
      {Key? key,
        this.contentWidget,
        this.bottomWidget,
        this.isScrollable = true,
        this.childClipBehavior})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        return SingleChildScrollView(
          clipBehavior: childClipBehavior ?? Clip.hardEdge,
          physics: isScrollable ? null : NeverScrollableScrollPhysics(),
          child: ConstrainedBox(
            constraints: constraints.copyWith(
              minHeight: constraints.maxHeight,
              maxHeight: double.infinity,
            ),
            child: IntrinsicHeight(
              child: Column(
                children: <Widget>[
                  if (contentWidget != null)
                    Expanded(
                      child: contentWidget!,
                    )
                  else
                    Spacer(),
                  if (bottomWidget != null) bottomWidget!,
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

使用方式

class TwoPage extends StatelessWidget {
  const TwoPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ContentContainer(
      contentWidget: Column(
        children: [
          Text('协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议'),
          Text('协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议协议'),
        ],
      ),
      bottomWidget: Container(
        padding: EdgeInsets.all(10),
        width: double.infinity,
        child: OutlinedButton(
          onPressed: () {},
          child: Text('按钮'),
        ),
      ),
    );
  }
}

上述组件可以用在任何可能需要滚动的界面上，不需要bottomWidget时不传参数即可。
最终效果图


untitled.gif
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容