Question

我想确定“可滚动”窗口小部件是否确实需要滚动。我最终希望显示类似“滚动更多”的内容。我该如何实现？

我可以结合使用LayoutBuilder和ScrollController。但是，ScrollController仅在发生任何事件后才给我maxScrollExtent和minScrollExtent-例如说用户尝试滚动

我想在“构建”期间知道，以便我可以决定是否显示“滚动更多”，具体取决于屏幕尺寸

class _MyHomePageState extends State<MyHomePage> {
  int value = 0;
  String text = 'You have pushed the button 0 times\n';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              flex: 9,
              child: SingleChildScrollView(
                child: Text(text),
              ),
            ),
            Expanded(
              flex: 1,
                child: Text('Scroll for more')),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            value += 1;
            text = text + 'You have pushed the button $value times \n';
          });
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), 
    );
  }
}

我想动态显示

            Text('Scroll for more'),

仅，如果需要滚动SingleChildScrollView以查看全部内容。请注意，我仅以上面的代码为例。

在我的真实情况下，我在SingleChildScrollView中有一个StreamBuilder，但我无法确定从流中流入多少数据。我也没有任何按钮或点击或任何手势来访问控制器和setState

在此先感谢您的帮助

Answer 1

class _MyHomePageState extends State<MyHomePage> {
  bool showMore = false;
  final scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    SchedulerBinding.instance.addPostFrameCallback((_) {
      setState(() {
        showMore = scrollController.position.maxScrollExtent > 0;
      });
    });
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              flex: 9,
              child: SingleChildScrollView(
                controller: scrollController,
                child: SizedBox(height: 650, child: Text('blah')),
              ),
            ),
            if (showMore) Expanded(flex: 1, child: Text('Scroll for more')),
          ],
        ),
      ),
    );
  }
}

确定滚动小部件的高度

1 个答案: