使RefreshIndicator与SingleChildScrollable一起使用

时间:2020-09-23 16:44:18

标签: flutter dart flutter-layout

我正在做一个小型家庭DIY项目(一个与RPi进行交互以打开/关闭车库门的应用程序),并且我的所有基础知识都很好..除了“拉动刷新”功能。我在其中找到了我认为应该的代码,并且没有引发任何异常,但是也没有按照预期进行操作。我什至无法拉下屏幕。

我对飞镖/打靶还很陌生,所以我觉得我缺少一些简单的东西。

  @override
  Widget build(BuildContext context) {
    var screen = MaterialApp(
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.home)),
                Tab(icon: Icon(Icons.description)),
              ],
            ),
            title: Text(widget.title),
          ),
          body: TabBarView(
            children: [
              Scaffold(
                body: LayoutBuilder(builder:
                    (BuildContext context, BoxConstraints viewportConstraints) {
                  return RefreshIndicator(
                    child: SingleChildScrollView(
                        child: ConstrainedBox(
                            constraints: BoxConstraints(
                                minHeight: viewportConstraints.maxHeight,
                                minWidth: viewportConstraints.maxWidth),
                            child: IntrinsicHeight(
                              child: Column(
                                children: <Widget>[
                                  Expanded(
                                      child: Container(
                                          color: DoorStatus(doorStatus)
                                              .backgroundColor,
                                          child: new FlatButton(
                                              onPressed: _refreshDoorStatus,
                                              child: DoorStatus(doorStatus)
                                                  .statusImage)))
                                ],
                              ),
                            ))),
                    onRefresh: _refreshDoorStatus,
                  );
                }),
                floatingActionButton: new FloatingActionButton(
                  onPressed: () => _triggerDoor(),
                  tooltip: 'Open/Close Door',
                  child: new Icon(Icons.lock),
                ),
              ),
              Scaffold(
                body: LayoutBuilder(builder:
                    (BuildContext context, BoxConstraints viewportConstraints) {
                  return RefreshIndicator(
                    child: SingleChildScrollView(
                        controller: _scrollController,
                        child: ConstrainedBox(
                            constraints: BoxConstraints(
                                minHeight: viewportConstraints.maxHeight,
                                minWidth: viewportConstraints.maxWidth),
                            child: IntrinsicHeight(
                                child: Column(
                              children: <Widget>[
                                Expanded(
                                    child: Text(
                                  '$logText',
                                  textAlign: TextAlign.left,
                                  overflow: TextOverflow.visible,
                                  style: TextStyle(
                                      fontSize: 14, fontFamily: 'CourierNew'),
                                ))
                              ],
                            )))),
                    onRefresh: _getLogs,
                  );
                }),
                floatingActionButton: new FloatingActionButton(
                  onPressed: () => _getLogs(),
                  tooltip: 'Refresh Logs',
                  child: new Icon(Icons.refresh),
                ),
              )
            ],
          ),
        ),
      ),
    );

1 个答案:

答案 0 :(得分:0)

您可以在下面复制粘贴运行完整代码
根据官方文件https://api.flutter.dev/flutter/material/RefreshIndicator-class.html
Refresh indicator does not show up =>将可滚动对象的Scrollable。physics属性设置为AlwaysScrollableScrollPhysics
您可以在工作演示中看到效果
代码段

RefreshIndicator(
        child: SingleChildScrollView(
            physics: AlwaysScrollableScrollPhysics(),
            child: ConstrainedBox(

工作演示

enter image description here

完整代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  Future<bool> _getLogs() {
    print("refresh 2");
    setState(() {
      _counter++;
    });
    return Future.value(true);
  }

  Future<bool> _refreshDoorStatus() {
    print("refreshDoorStatus");
    return Future.value(true);
  }

  void _triggerDoor() {}

  @override
  Widget build(BuildContext context) {
    var screen = MaterialApp(
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.home)),
                Tab(icon: Icon(Icons.description)),
              ],
            ),
            title: Text(widget.title),
          ),
          body: TabBarView(
            children: [
              Scaffold(
                body: LayoutBuilder(builder:
                    (BuildContext context, BoxConstraints viewportConstraints) {
                  return RefreshIndicator(
                    child: SingleChildScrollView(
                        physics: AlwaysScrollableScrollPhysics(),
                        child: ConstrainedBox(
                            constraints: BoxConstraints(
                                minHeight: viewportConstraints.maxHeight,
                                minWidth: viewportConstraints.maxWidth),
                            child: IntrinsicHeight(
                              child: Column(
                                children: <Widget>[
                                  Expanded(
                                      child: Container(
                                          color: Colors.red,
                                          child: FlatButton(
                                              onPressed: _refreshDoorStatus,
                                              child: Text("click"))))
                                ],
                              ),
                            ))),
                    onRefresh: _refreshDoorStatus,
                  );
                }),
                floatingActionButton: FloatingActionButton(
                  onPressed: () => _triggerDoor(),
                  tooltip: 'Open/Close Door',
                  child: Icon(Icons.lock),
                ),
              ),
              Scaffold(
                body: LayoutBuilder(builder:
                    (BuildContext context, BoxConstraints viewportConstraints) {
                  return RefreshIndicator(
                    child: SingleChildScrollView(
                        //controller: _scrollController,
                        physics: AlwaysScrollableScrollPhysics(),
                        child: ConstrainedBox(
                            constraints: BoxConstraints(
                                minHeight: viewportConstraints.maxHeight,
                                minWidth: viewportConstraints.maxWidth),
                            child: IntrinsicHeight(
                                child: Column(
                              children: <Widget>[
                                Expanded(
                                    child: Text(
                                  'logText',
                                  textAlign: TextAlign.left,
                                  overflow: TextOverflow.visible,
                                  style: TextStyle(
                                      fontSize: 14, fontFamily: 'Courier'),
                                ))
                              ],
                            )))),
                    onRefresh: _getLogs,
                  );
                }),
                floatingActionButton: FloatingActionButton(
                  onPressed: () => _getLogs(),
                  tooltip: 'Refresh Logs',
                  child: Icon(Icons.refresh),
                ),
              )
            ],
          ),
        ),
      ),
    );
    return screen;
  }
}