Flutter 中的网格视图

Question

我正在做一个 flutter 项目，我制作了一个带有图像和标题的 GridView，但我希望标题在正方形之外，如果我进行填充，他们会给出这个错误底部溢出 32 像素。非常感谢任何帮助。

这是我的代码：

Card makeDashboardItem(String title, String img, int index) {
    return Card(
      elevation: 2,
      margin: const EdgeInsets.all(3),
      child: Container(
        child: InkWell(
          onTap: () {
            setState(() {
              isLoading = true;
            });
            _splitScreen2(index);
          },
          child: Column(
            children: <Widget>[
              const SizedBox(height: 10),
              Center(
                child: Image.asset(img,
                    alignment: Alignment.center),
                ),
              const SizedBox(height: 1),
              Center(
                child: Text(
                  title,
                  style: const TextStyle(
                      fontSize: 13,
                      color: Colors.black,
                      ),
                ),
              ),
            ],
          ),
      ),
      ),
    );
  }

Answer 1

GridView children 尺寸取决于宽高比，默认为 1。在您的情况下，图像高度不正确。

对于您的情况，您可以在 Image.asset 上使用 fit。

Image.asset(
  "",
  fit: BoxFit.cover, // or the .width or the one you prefer
),

你也可以试试GridTile

GridTile(
  child: Image.asset(
    "",
    fit: BoxFit.cover,
  ),
  footer: Text("title"),
),

更多关于 GridTile and BoxFit。

Answer 2

首先，您创建小部件树的方式不正确。目前，您有

Card -> Container -> Column -> 1. Image
                               2. Text

如果你想让标题不在你的方块(Card)里，应该是：

Column -> 1. Card -> Image
          2. Text

这样你的头衔就出卡了

Answer 3

Check DartPad

主要问题是溢出，所以我们将 Expanded 小部件包装在 Image 小部件上。

Nb: 从 Image widget 中移除 Expanded widget 你可以看到区别

CardWidget

    class ItemWidget extends StatelessWidget {
  var data;

  ItemWidget(this.data, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      child: Card(
        child: Column(
          children: [
            Expanded(
              child: Container(
                height: 125,
                child: Image.network(
                  data["Image"],
                  alignment: Alignment.center,
                  fit: BoxFit.cover,
                ),
              ),
            ),
            Center(
                child: Text(
              data["Name"],
              style: TextStyle(fontSize: 12),
            ))
          ],
        ),
      ),
    );
  }
}

完整代码

import 'package:flutter/material.dart';


  runApp(
    MaterialApp(debugShowCheckedModeBanner: false, home: MyApp()),
  );
}



class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    var list = [
      {
        "Name": "ElectroniQues",
        "Image":
            "https://ecommerce.ccc2020.fr/wp-content/uploads/2020/10/electronic-gadgets.jpeg"
      },
      {
        "Name": "Accessories",
        "Image":
            "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/classic-accessories-1516305397.jpg"
      },
      {
        "Name": "Hommes",
        "Image":
            "https://teja12.kuikr.com/is/a/c/880x425/gallery_images/original/cf5d08bff955e71.gif"
      },
      {
        "Name": "Femmes",
        "Image":
            "https://cdn.pixabay.com/photo/2013/07/13/14/08/apparel-162192_1280.png"
      },
      {
        "Name": "Enfants",
        "Image": "https://images.indianexpress.com/2019/09/toys.jpg"
      },
      {
        "Name": "Sunglasses",
        "Image": "https://m.media-amazon.com/images/I/51zEsraniRL._UX569_.jpg"
      },
      {
        "Name": "ElectroniQues",
        "Image":
            "https://ecommerce.ccc2020.fr/wp-content/uploads/2020/10/electronic-gadgets.jpeg"
      },
      {
        "Name": "Accessories",
        "Image":
            "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/classic-accessories-1516305397.jpg"
      },
      {
        "Name": "Hommes",
        "Image":
            "https://teja12.kuikr.com/is/a/c/880x425/gallery_images/original/cf5d08bff955e71.gif"
      },
      {
        "Name": "Femmes",
        "Image":
            "https://cdn.pixabay.com/photo/2013/07/13/14/08/apparel-162192_1280.png"
      },
      {
        "Name": "Enfants",
        "Image": "https://images.indianexpress.com/2019/09/toys.jpg"
      },
      {
        "Name": "Sunglasses",
        "Image": "https://m.media-amazon.com/images/I/51zEsraniRL._UX569_.jpg"
      },
    ];
    var column = Column(mainAxisAlignment: MainAxisAlignment.start, children: [
      ...list.map((e) {

        return GestureDetector(onTap:(){},child: ItemWidget(e));
      }).toList()
    ]);
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SafeArea(
        child: Row(
          children: [
            SideWidget(),
            Expanded(
              child: Scaffold(
                bottomNavigationBar: buildBottomNavigationBar(),
                body: Padding(
                  padding: const EdgeInsets.only(top: 18.0),
                  child:
                      // column
                      GridView.count(
                    crossAxisCount: 3,
                    mainAxisSpacing: 2,
                    crossAxisSpacing: 2,
                    children: [
                      ...list.map((e) {

                        return InkWell(onTap:(){},child: ItemWidget(e));
                      }).toList()
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  BottomNavigationBar buildBottomNavigationBar() {
    return BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: 'Home',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.business),
          label: 'Business',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.school),
          label: 'School',
        ),
      ],
      currentIndex: 0,
      selectedItemColor: Colors.amber[800],
      onTap: (v) {},
    );
  }
}

class SideWidget extends StatelessWidget {
  const SideWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Container(
        width: 63,
        color: Colors.white,
        child: ListView(
          children: [
            ...[
              Icons.headset,
              Icons.pets,
              Icons.watch,
              Icons.color_lens,
              Icons.today
            ]
                .map((e) => Padding(
                      padding: const EdgeInsets.symmetric(
                          vertical: 16.0, horizontal: 4.0),
                      child: TextButton(
                        onPressed: () {},
                        child: Icon(
                          e,
                          color: Colors.blueGrey,
                          size: 40,
                        ),
                      ),
                    ))
                .toList()
          ],
        ),
      ),
    );
  }
}

class ItemWidget extends StatelessWidget {
  var data;

  ItemWidget(this.data, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      child: Card(
        child: Column(
          children: [
            Expanded(
              child: Container(
                height: 125,
                child: GridTile(
                  // footer:Text(data["Name"]) ,
                  child: Image.network(
                    data["Image"],
                    alignment: Alignment.center,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
            Center(
                child: Text(
              data["Name"],
              style: TextStyle(fontSize: 12),
            ))
          ],
        ),
      ),
    );
  }
}

Flutter 中的网格视图

GridView in Flutter

android

listview

gridview

flutter