首页 > 解决方案 > 滚动视图在颤动中没有响应

问题描述

我的 Scrollview 没有响应,有人可以告诉我在代码中缺少什么:

请建议我如何添加滚动视图侦听器,我是初学者。

import 'package:flutter/material.dart';
import 'package:share/share.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:url_launcher/url_launcher.dart';
import '../main.dart';
import 'favourite_articles.dart';
import 'coin_system.dart';

class Settings extends StatefulWidget {
  @override
  _SettingsState createState() => _SettingsState();
}

class _SettingsState extends State<Settings> {
  bool _notification = false;
  ScrollController _controller;
  @override
  void initState() {
    super.initState();
    checkNotificationSetting();
  }

  checkNotificationSetting() async {
    final prefs = await SharedPreferences.getInstance();
    final key = 'notification';
    final value = prefs.getInt(key) ?? 0;
    if (value == 0) {
      setState(() {
        _notification = false;
      });
    } else {
      setState(() {
        _notification = true;
      });
    }
  }

  saveNotificationSetting(bool val) async {
    final prefs = await SharedPreferences.getInstance();
    final key = 'notification';
    final value = val ? 1 : 0;
    prefs.setInt(key, value);
    if (value == 1) {
      setState(() {
        _notification = true;
      });
    } else {
      setState(() {
        _notification = false;
      });
    }
    Future.delayed(const Duration(milliseconds: 500), () {
      Navigator.of(context).pushReplacement(
          MaterialPageRoute(builder: (BuildContext context) => MyHomePage()));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        centerTitle: true,
        title: Text(
          'More',
          style: TextStyle(
              color: Colors.black,
              fontWeight: FontWeight.bold,
              fontSize: 20,
              fontFamily: 'Poppins'),
        ),
        elevation: 5,
        backgroundColor: Colors.white,
        actions: <Widget>[
          IconButton(
              icon: Icon(Icons.mail),
              color: Colors.black,
              tooltip: 'Song Request',
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => CoinSystem(),
                  ),
                );
              })
        ],
      ),
      body: Container(
        decoration: BoxDecoration(color: Colors.white),
        child: SingleChildScrollView(
          controller: _controller,
          scrollDirection: Axis.vertical,
          child: Column(
            children: <Widget>[
              Container(
                alignment: Alignment.center,
                padding: EdgeInsets.fromLTRB(0, 20, 0, 10),
                child: Image(
                  image: AssetImage('assets/icon.png'),
                  height: 50,
                ),
              ),
              Container(
                alignment: Alignment.center,
                padding: EdgeInsets.fromLTRB(0, 10, 0, 20),
                child: Text(
                  "Version 2.1.0 \n ",
                  textAlign: TextAlign.center,
                  style: TextStyle(height: 1.6, color: Colors.black87),
                ),
              ),
              Divider(
                height: 10,
                thickness: 2,
              ),
              //ListWheelScrollView(
              ListView(
                //itemExtent: 75,
                shrinkWrap: true,
                children: <Widget>[
                  InkWell(
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => FavouriteArticles(),
                        ),
                      );
                    },
                    child: ListTile(
                      leading: Image.asset(
                        "assets/more/favourite.png",
                        width: 30,
                      ),
                      title: Text('Favourite'),
                      subtitle: Text("See the saved songs"),
                    ),
                  ),

                  //Song Request Code
                  InkWell(
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => CoinSystem(),
                        ),
                      );
                    },
                    child: ListTile(
                      leading: Image.asset(
                        "assets/more/songrequest.png",
                        width: 30,
                      ),
                      title: Text('Songs Request'),
                      subtitle: Text("Request your favourite songs"),
                    ),
                  ),

                  //Song Request Code End

                  
                  
                  
                  ListTile(
                    leading: Image.asset(
                      "assets/more/notification.png",
                      width: 30,
                    ),
                    isThreeLine: true,
                    title: Text('Notification'),
                    subtitle: Text("Change notification preference"),
                    trailing: Switch(
                        onChanged: (val) async {
                          await saveNotificationSetting(val);
                        },
                        value: _notification),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
      //),
    );
    //);
  }
}

所以,我尝试了 SingleChildScrollView,因为我有 Container 和 Listview。但是 Listview 在横向模式下不响应滚动操作。

我添加了 ScrollController _controller; 我是否必须创建监听滚动动作的 _controller 类?

标签: flutterscrollview

解决方案


据我了解,您希望能够进行 2 次滚动。1. 使用 SingleChildScrollView 和在那个 Widget 里面,你希望能够滚动底层,因此你使用 ListView。要使其工作,您必须将 ListView 放在具有一定高度的小部件内。这个实现的例子是:

SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: Column(
        children: <Widget>[
          SizedBox(child: Text('Upper scrollable'), height: 450),
          Divider(
            height: 10,
            thickness: 2,
          ),
          Container(
            height: 350,
            child: ListView(
              shrinkWrap: true,
              children: <Widget>[
                Container(
                  color:Colors.red,
                  child: SizedBox(child: Text('Bottom scrollable'), height: 450),
                ),
              ],
            ),
          )
        ],
      ),
    ),

如果不想使用 2 滚动,请不要在 SingleChildScrollView 中使用 ListView。


推荐阅读