颤振 | 3.保持1个项目在行中

Question

例如，在 Flutter 中使用 GridView 时，我只希望一个项目保留在索引 3 处。右边的另一个项目（如图所示）应该在下面的一张 down.I 左边的图片中。你会明白我的意思。 enter image description here

GridView.builder(
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                  ),
                  itemCount: BesiktasSaha.dataName.length,
                  itemBuilder: (BuildContext context, index) {
                    return Container(
                      child: Column(
                        children: [
                          GestureDetector(
                            onTap: () {
                              setState(() {
                                if (deneme1 == true) {
                                  sayi1 = index;
                                  deneme1 = false;
                                  isigiYak = false;
                                }
                              });
                            },
                            child: Card(
                              color: Colors.white.withOpacity(.5),
                              child: Container(
                                decoration: BoxDecoration(
                                  image: DecorationImage(
                                    image:
                                        AssetImage(dataData[index].playerImg),
                                  ),
                                ),
                                height: 150,
                                width: 150,
                              ),
                            ),
                          ),
                          Text(
                            '${dataData[index].name}',
                            textAlign: TextAlign.center,
                            style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold),
                          ),
                        ],
                      ),
                    );
                  },
                ),

Answer 1

您可以BesiktasSaha.dataName组成新的List，每3个插入一个空项。

DartPad中有一个例子：

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<String?> items = ["0", "1", "2", "3", "4", "5", "6", "7"]; /// Your original list
    List<String?> newItems = []; /// Your new list
    for (var i = 0; i < items.length; i++) {
      if (i % 3 == 0 && i != 0) {
        newItems.add(null); /// insert a null item
      }
      newItems.add(items[i]);
    }
    return GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
        ),
        itemCount: newItems.length,
        itemBuilder: (BuildContext context, index) {
          return (newItems[index] == null)
              ? Container() /// if the item is null, display empty
              : Container(
                  color: Colors.blue,
                  child: Text(
                    newItems[index]!,
                    style: Theme.of(context).textTheme.headline4,
                  ));
        });
  }
}

颤振 | 3.保持1个项目在行中

Flutter | 3. To keep 1 item in the row

grid

gridview

flutter