Как добавить текст и какое-то содержимое внутри изображения в список сетки элементов - PullRequest
Новая
       0

Как добавить текст и какое-то содержимое внутри изображения в список сетки элементов

1 голос
/ 27 мая 2020

Теперь у меня есть виджет grid_list, как показано ниже: 

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

import '../providers/products.dart';
import './product_item.dart';

class ProductsGrid extends StatelessWidget {
  final bool showFavs;

  ProductsGrid(this.showFavs);

  @override
  Widget build(BuildContext context) {
    final productsData = Provider.of<Products>(context);
    final products = showFavs ? productsData.favoriteItems : productsData.items;
    return GridView.builder(
      padding: const EdgeInsets.all(10.0),
      itemCount: products.length,
      itemBuilder: (ctx, i) => ChangeNotifierProvider.value(
            // builder: (c) => products[i],
            value: products[i],
            child: ProductItem(
            ),
          ),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 1,
        childAspectRatio: 3 / 2,
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
      ),
    );
  }
}

и список элементов, как показано ниже: 

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

import '../screens/product_detail_screen.dart';
import '../providers/product.dart';
import '../providers/cart.dart';

class ProductItem extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    final product = Provider.of<Product>(context, listen: false);
    final cart = Provider.of<Cart>(context, listen: false);
    return ClipRRect(
      borderRadius: BorderRadius.circular(16),
      child: GridTile(
        child: GestureDetector(
          onTap: () {
            Navigator.of(context).pushNamed(ProductDetailScreen.routeName,
                arguments: product.id);
          },
          child: AspectRatio(
            aspectRatio: 2,
            child: Image.asset(
              product.imageUrl,
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
    );
  }
}

, и дайте мне список как изображение ниже

my_list

Итак, теперь мне нужно добавить некоторое содержимое поверх изображения, например, добавить значки в углах и добавить текст справа или в центре изображение в каждом элементе должно быть чем-то вроде изображения ниже:

template

Я надеюсь, что кто-то может помочь мне решить эту проблему, я попытался добавить GridTileBar, но я обнаружил, что высоту этой панели плиток нельзя настроить, добавив footer, title и trailing, поскольку мне нужно добавить больше содержимого, как я хочу, но IconButton в каждом углу элемента списка, а также добавьте содержимое, как показано на рисунке ..

Ответы [ 2 ]

2 голосов
/ 27 мая 2020

Вам необходимо использовать виджет Stack: 

SizedBox(
  width: 250,
  height: 250,
  child: Stack(
    children: <Widget>[
      Container(
        width: 250,
        height: 250,
        color: Colors.white,
      ),
      Container(
        padding: EdgeInsets.all(5.0),
        alignment: Alignment.bottomCenter,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: <Color>[
              Colors.black.withAlpha(0),
              Colors.black12,
              Colors.black45
            ],
          ),
        ),
        child: Text(
          "Foreground Text",
          style: TextStyle(color: Colors.white, fontSize: 20.0),
        ),
      ),
    ],
  ),
)

https://api.flutter.dev/flutter/widgets/Stack-class.html

1 голос
/ 27 мая 2020

То, что вы ищете, - это виджет стека. Посмотрите документы. https://api.flutter.dev/flutter/widgets/Stack-class.html

...