將參數傳遞給可重用的小部件

Question

我正在嘗試使用可重用的小部件，並且我想從我的小部件調用中向它發送一個參數，該參數對於每次重用都會有所不同

    children: 
const [
                      ImageContainer(),
                      ImageContainer(),
                      ImageContainer()
                    ],

我想在這里使用它而不是“0.jpg”之類的 $id.jpg 目標是根據小部件獲得不同的照片

class ImageContainer extends StatefulWidget {
  const ImageContainer({Key? key}) : super(key: key);

  @override
  State<ImageContainer> createState() => _ImageContainerState();
}

class _ImageContainerState extends State<ImageContainer> {
  File? image;

  Future pickImage() async {
    try {
      final image = await ImagePicker().pickImage(source: ImageSource.gallery);

      if (image == null) return;

      final imageTemp = File(image.path);

      setState(() => this.image = imageTemp);
      final Directory extDir = await getApplicationDocumentsDirectory();
      String dirPath = extDir.path;
      const fileName = '0';
      final File localImage = await imageTemp.copy('$dirPath/$fileName.jpg');
      print(localImage);
    } on PlatformException catch (e) {}
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: () {
          pickImage();
        },
        child: Container(
            decoration: BoxDecoration(
                image: DecorationImage(
                  image: FileImage(File(
                      "/data/user/0/com.example.live_snap/app_flutter/0.jpg")),
                  fit: BoxFit.cover,
                ),
                color: Colors.black87,
                borderRadius: BorderRadius.circular(5)),
            child: Align(
              alignment: FractionalOffset.bottomLeft,
              child: MaterialButton(
                  shape: const RoundedRectangleBorder(
                    borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(5),
                      bottomRight: Radius.circular(5),
                    ),
                  ),
                  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                  minWidth: double.infinity,
                  color: Colors.yellow,
                  onPressed: () {},
                  child: Text('SNAPPER')),
            )));
  }
}

太感謝了！

Answer 1

使用ListView.builder

final List<String> imageNames = <String>['apple', 'orange', 'banana'];

ListView.builder(
  itemCount: imageNames.length,
  itemBuilder: (BuildContext context, int index) {
    return   ImageContainer(imageName: imageNames[index]),
  }
);

/// and add parameter imageName to your ImageContainer()

class ImageContainer extends StatefulWidget {
  final String imageName
  const ImageContainer({Key? key, required imageName}) : super(key: key);

  @override
  State<ImageContainer> createState() => _ImageContainerState();
}

class _ImageContainerState extends State<ImageContainer> {
 
  /// access the imageName in here

  File? image;

  Future pickImage() async {
    try {
      final image = await ImagePicker().pickImage(source: ImageSource.gallery);

      if (image == null) return;

      final imageTemp = File(image.path);

      setState(() => this.image = imageTemp);
      final Directory extDir = await getApplicationDocumentsDirectory();
      String dirPath = extDir.path;
      const fileName = '0';
      final File localImage = await imageTemp.copy('$dirPath/$fileName.jpg');
      print(localImage);
    } on PlatformException catch (e) {}
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: () {
          pickImage();
        },
        child: Container(
            decoration: BoxDecoration(
                image: DecorationImage(
                  image: FileImage(File(
                      "/data/user/0/com.example.live_snap/app_flutter/0.jpg")),
                  fit: BoxFit.cover,
                ),
                color: Colors.black87,
                borderRadius: BorderRadius.circular(5)),
            child: Align(
              alignment: FractionalOffset.bottomLeft,
              child: MaterialButton(
                  shape: const RoundedRectangleBorder(
                    borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(5),
                      bottomRight: Radius.circular(5),
                    ),
                  ),
                  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                  minWidth: double.infinity,
                  color: Colors.yellow,
                  onPressed: () {},
                  child: Text('SNAPPER')),
            )));
  }
}

Answer 2

我會發表評論，但我的聲譽不夠高..

看起來您只需要在有狀態小部件中添加一個 id var。

class ImageContainer extends StatefulWidget {
  final String id;
  const ImageContainer({Key? key, required this.id}) : super(key: key);

  @override
  State<ImageContainer> createState() => _ImageContainerState();
}

class _ImageContainerState extends State<ImageContainer> {
  File? image;

  Future pickImage() async {
    try {
      final image = await ImagePicker().pickImage(source: ImageSource.gallery);

      if (image == null) return;

      final imageTemp = File(image.path);

      setState(() => this.image = imageTemp);
      final Directory extDir = await getApplicationDocumentsDirectory();
      String dirPath = extDir.path;
      const fileName = '0';
      final File localImage = await imageTemp.copy('$dirPath/$fileName.jpg');
      print(localImage);
    } on PlatformException catch (e) {}
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: () {
          pickImage();
        },
        child: Container(
            decoration: BoxDecoration(
                image: DecorationImage(
                  image: FileImage(File(
                      widget.id+".jpg")),
                  fit: BoxFit.cover,
                ),
                color: Colors.black87,
                borderRadius: BorderRadius.circular(5)),
            child: Align(
              alignment: FractionalOffset.bottomLeft,
              child: MaterialButton(
                  shape: const RoundedRectangleBorder(
                    borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(5),
                      bottomRight: Radius.circular(5),
                    ),
                  ),
                  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                  minWidth: double.infinity,
                  color: Colors.yellow,
                  onPressed: () {},
                  child: Text('SNAPPER')),
            )));
  }
}

然后你可以做

 children: 
const [
      ImageContainer(id:"/data/user/0/com.example.live_snap/app_flutter/0"),
],

如果我沒有正確理解您的問題，請告訴我！