如何在Flutter中编写具有获取图像作为输入功能的卡片小部件? [英] How do I write in Flutter a card widget with the ability to get images as input?

问题描述

我只编写了一个小部件，可以在其顶部显示图片和文本.我想更改窗口小部件，使其成为一个模板，在其中发送所需的文本和图像，并显示它，但是现在整个应用程序中都有一个相同的图像.如何使图像作为输入发送到 buildImageCard();

I wrote just a widget with the ability to display a picture and text on top of it. I want to change the widget so that it is a template in which I send the text and image I need, and it displays it, but now there is one and the same image in the entire application. How can I make it possible to send an image as input to buildImageCard();

带有小部件的主页:

import 'package:project_alpha/widgets/ImageCard.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return ListView(
      // gridDelegate:
      //     SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
      padding: EdgeInsets.all(16),
      children: [
        buildImageCard(),
        buildImageCard(),
        buildImageCard(),
        buildImageCard(),
        buildImageCard(),
        buildImageCard(),
      ],
    );
  }
}

小部件:

Widget buildImageCard() => Card(
      clipBehavior: Clip.antiAlias,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(24),
      ),
      child: Column(
        children: [
          Stack(
            children: [
              Ink.image(
                image: AssetImage('assets/images/screen.png'),
                height: 240,
                fit: BoxFit.cover,
              ),
              Positioned(
                bottom: 30,
                right: 16,
                left: 16,
                child: Text(
                  'Interesting fact!',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                    fontSize: 24,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );

推荐答案

如果您使用的是 AssetImage ，则只需要图像的路径即可.您可以像其他任何参数一样，将该路径作为 String 传递给构建器函数.

If you are using AssetImage you just need the path to the Image. You can pass that path as a String to the builder function like any other parameter.

Widget buildImageCard(String imagePath) => Card(
      clipBehavior: Clip.antiAlias,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(24),
      ),
      child: Column(
        children: [
          Stack(
            children: [
              Ink.image(
                image: AssetImage(imagePath),
                height: 240,
                fit: BoxFit.cover,
              ),
              Positioned(
                bottom: 30,
                right: 16,
                left: 16,
                child: Text(
                  'Interesting fact!',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                    fontSize: 24,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );




class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return ListView(
      // gridDelegate:
      //     SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
      padding: EdgeInsets.all(16),
      children: [
        buildImageCard('assets/images/screen.png'),
        buildImageCard('assets/images/screen2.png'),
        buildImageCard('assets/images/screen3.png'),
        buildImageCard('assets/images/screen4.png'),
        buildImageCard('assets/images/screen5.png'),
        buildImageCard('assets/images/screen6.png'),
      ],
    );
  }
}

这篇关于如何在Flutter中编写具有获取图像作为输入功能的卡片小部件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！