如何在 flutter 中切换主屏幕网格视图

Question

如何在 flutter 中创建主屏幕网格视图菜单，使其可交换以及 gridview，如下面的示例截图。

Answer 1

您可以使用PageView或PageView.builder PageView 接受子级，因此用它包装您的gridView小部件，将scrollDirection设置为 Axis.vertical，如：

PageView(
          scrollDirection: Axis.vertical,
          children: [
            YourFirstGridView(),
            YourSecondGridView(),
            YourThirdGridView(),
          ],
        ),

对于指标，您可以使用Stack小部件包装该PageView并添加您的指标小部件，该小部件将由 PageController 成为 controller

希望能帮助到你

Answer 2

使用滚动方向：Axis.horizontal，在 gridview

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class GridViewDemo extends StatefulWidget {
  const GridViewDemo({Key? key}) : super(key: key);

  @override
  State<GridViewDemo> createState() => _GridViewDemoState();
}

class _GridViewDemoState extends State<GridViewDemo> {
  @override
  Widget build(BuildContext context) {
  return   Scaffold(
      appBar: AppBar(
        title: Text("Flutter GridView Demo"),
        backgroundColor: Colors.red,
      ),
      body: Container(
          padding: EdgeInsets.all(12.0),
          child: GridView.builder(
            itemCount: 50,
            scrollDirection: Axis.horizontal,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                crossAxisSpacing: 4.0,
                mainAxisSpacing: 4.0
            ),
            itemBuilder: (BuildContext context, int index){
              return Image.network("");
            },
          )),
    );
  }
}