颤振：滚动视图无响应

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});
}

我的Nav条形码

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 尝试此操作。希望这能解决您的问题。

while(condition)
{
  // code here
}

Answer 2

您需要将GridView嵌入到SingleChildScrollView小部件中。该小部件处理其子级的滚动，在您的情况下为GridView。 ListView也是如此。

请参阅链接以获取详细文档。

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

编辑

我忘记了，您必须赋予GridView高度才能在SingleChildScrollView内部工作。您可以使用包装GridView的容器。

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

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

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