Блог

Главная - Вопросы по программированию - Могу ли я в любом случае добавить текст под изображениями в gridview.builder?

Могу ли я в любом случае добавить текст под изображениями в gridview.builder?

#flutter

Вопрос:

нужна какая-то идея о том, как добавить текстовое поле под каждым из изображений в Gridview.builder.

Ниже приведен мой код.

  child: GridView.builder(
          primary: false,
          padding: const EdgeInsets.all(20),
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisSpacing: 10, mainAxisSpacing: 10, crossAxisCount: 2),
          itemCount: 10,
          itemBuilder: (BuildContext context, int index) {
            Widget widget;
            switch (index) {
              case 0:
                widget = Container(
                  padding: const EdgeInsets.all(8),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.white,
                  ),
                  child: Image.network(
                      'https://ezyorder.com.my/uploads/products/t-shirt_man.png'),
                );
                break;
              case 1:
                widget = Container(
                  padding: const EdgeInsets.all(8),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.white,
                  ),
                  child: Image.network(
                      'https://ezyorder.com.my/uploads/products/black_full_sleeves.png'),
                );
                break;

Вот результат.
Результат

Комментарии:

1. Оберните изображение.сеть столбцом и добавьте текстовый виджет на дочерние элементы столбца.

Ответ №1:

Оберните свое изображение столбцом и добавьте изображение и текст,

  Container(
  padding: const EdgeInsets.all(8),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    color: Colors.white,
  ),
  child: Column(
    children: [
      Expanded(
        child: Image.network(
          'https://images.unsplash.com/photo-1633550306397-55382904f350?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8amp;ixlib=rb-1.2.1amp;auto=formatamp;fit=cropamp;w=3072amp;q=80',
        ),
      ),
      const SizedBox(height: 10),
      const Text(
        'Pop Corn',
        style: TextStyle(
          color: Colors.black,
          fontSize: 18,
          fontWeight: FontWeight.w600,
        ),
      )
    ],
  ),
);

Если вам нужна Text внешняя сторона, то оберните Container Column ее буквой а и добавьте текст рядом с Container ней .

Ответ №2:

Я думаю, вам следует использовать GridTile виджет. У него есть footer свойство, в котором вы можете легко разместить свой текст

 GridTile(
  child: Image.network('image url here'),
  footer: Text('Title goes here'),
)
Метки: