Flutter：滚动视图没有响应

Question

我对扑扑还是很陌生。我已经使用网格视图构建了一个登录页面并添加了一个底部导航栏。登录后首先调用导航栏，我已将屏幕添加到导航类。面临的问题是导航栏在我的网格项目之上，当我尝试向上滚动时，网格项目是粘滞的并且没有移动，我做错了什么？？

我的主屏幕代码

class GridDashboard extends StatelessWidget {

  var services = [
    "Home",
    "Update",
    "Bluetooth",
    "Forms",
    "Supervisor",
    "Messages",
    "Settings",
    "App updates",
    "Logout",
  ];

  var images = [
    "assets/home.png",
    "assets/updated.png",
    "assets/bluetooth.png",
    "assets/todo.png",
    "assets/supervisor.png",
    "assets/message.png",
    "assets/setting.png",
    "assets/update.ico",
    "assets/logout.png",
  ];

  @override
  Widget build(BuildContext context) {
    List<Items> myList = [home, update, bluetooth, forms, supervisor, messages, settings, check, logout];
    var color = 0xff453658;
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        height: 500,
        // margin: EdgeInsets.only(top: 10),
        // padding: EdgeInsets.all(20),
        child: GridView.builder(
          // add this
          shrinkWrap: true,
          itemCount: services.length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            childAspectRatio: MediaQuery.of(context).size.width /
                (MediaQuery.of(context).size.height / 1.4),
          ),
          itemBuilder: (BuildContext context, int index) {
            return GestureDetector(
              onTap: () {
                Navigator.push(context, new MaterialPageRoute<Widget>(
                    builder: (BuildContext context) {
                      if(myList != null){
                        return myList[index].screen;
                      }else{
                        return null;
                      }

                }));
              },
              child: Padding(
                padding: EdgeInsets.all(3),
                child: Card(
                  elevation: 10,
                  child: ListView(
                    children: <Widget>[
                      SizedBox(
                        height: 20,
                      ),
                      Image.asset(
                        images[index],
                        height: 50.0,
                        width: 50.0,
                      ),
                      Padding(
                        padding: const EdgeInsets.all(20.0),
                        child: Text(
                          services[index],
                          style: TextStyle(
                              fontSize: 16.0,
                              height: 1.2,
                              color: Colors.white,
                              fontWeight: FontWeight.bold),
                          textAlign: TextAlign.center,
                        ),
                      ),
                    ],
                  ),
                  color: Color(color),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

class Items {
  String title;
  String subtitle;
  String event;
  String img;
  final Widget screen;

  Items({this.title, this.subtitle, this.event, this.img, this.screen});
}

我的导航条码

class _NavSCreenState extends State<NavSCreen> {
  final List<Widget> _screens = [Home()];

  final List<IconData> _icons = const [
    Icons.home,
    Icons.settings,
    MdiIcons.accountCircleOutline,
    MdiIcons.accountGroupOutline,
    Icons.menu,
  ];

  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: _icons.length,
        child: Scaffold(
          body: IndexedStack(index: _selectedIndex, children: _screens),
          bottomNavigationBar: Padding(
            padding: const EdgeInsets.only(bottom: 8.0),
            child: CustomTabBar(
              icons: _icons,
              selectedIndex: _selectedIndex,
              onTap: (index) => setState(() => _selectedIndex = index),
            ),
          ),
        ));
  }
}

Answer 1

添加 SingleChildScrollView 试试这个。希望这能解决您的问题。

  @override
  Widget build(BuildContext context) {
        List<Items> myList = [home, update, bluetooth, forms, supervisor, messages, settings, check, logout];
        var color = 0xff453658;
        return Scaffold(
          
        body: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
              height: 500,
              // margin: EdgeInsets.only(top: 10),
              // padding: EdgeInsets.all(20),
              child: GridView.builder(
              // add this
              shrinkWrap: true,
              itemCount: services.length,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                childAspectRatio: MediaQuery.of(context).size.width /
                    (MediaQuery.of(context).size.height / 1.4),
              ),
              itemBuilder: (BuildContext context, int index) {
                return GestureDetector(
                  onTap: () {
                    Navigator.push(context, new MaterialPageRoute<Widget>(
                        builder: (BuildContext context) {
                          if(myList != null){
                            return myList[index].screen;
                          }else{
                            return null;
                          }
    
                    }));
                  },
                  child: Padding(
                    padding: EdgeInsets.all(3),
                    child: Card(
                      elevation: 10,
                      child: ListView(
                        children: <Widget>[
                          SizedBox(
                            height: 20,
                          ),
                          Image.asset(
                            images[index],
                            height: 50.0,
                            width: 50.0,
                          ),
                          Padding(
                            padding: const EdgeInsets.all(20.0),
                            child: Text(
                              services[index],
                              style: TextStyle(
                                  fontSize: 16.0,
                                  height: 1.2,
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold),
                              textAlign: TextAlign.center,
                            ),
                          ),
                        ],
                      ),
                      color: Color(color),
                    ),
                  ),
                );
              },
            ),
          ),
        ),
      ),
        
    );
}

Answer 2

您需要将GridView 嵌入到SingleChildScrollView 小部件中。此小部件处理其子级的滚动，在您的情况下是 GridView。这同样适用于ListView。

查看详细文档的链接。

// ...
child: Container(
  height: 500,
  child: SingleChildScrollView(
    child: GridView.builder(
      // ...
    )
  )
)
// ...

编辑

我忘了，你必须给 GridView 一个高度才能在 SingleChildScrollView 中工作。您可以使用包装 GridView 的 Container。

// ...
child: Container(
  height: 500,
  child: SingleChildScrollView(
    child: Container(
      height: 500,
      child: GridView.builder(
      // ...
      )
    )
  )
)
// ...

但是使用这种方法，您必须为 GridView 提供预定义的高度。另一种方法是CustomScrollView，但您必须为此使用SliverGrid。

CustomScrollView(
  slivers: [
    SliverGrid(
      // ...
    )
  ]
)