如何添加彼此堆叠的图像[FLUTTER]

Question

我无法将图片放在一起

我的结果 - 我的结果

需要什么结果 - 结果

我尝试使用“定位”和“堆栈”进行添加。但一切都没有成功

我还尝试添加另一个 Positioned 到 _TopPosterWidget 并在那里插入图片，但它被切断了

图片必须与STRING线在一起

import 'package:filmoteka/Theme/color.dart';
import 'package:flutter/material.dart';


class MovieDetailsInfo extends StatelessWidget {
  const MovieDetailsInfo({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        _TopPosterWidget(),
        _MovieNameWidget(),
      ],
    );
  }
}

class _TopPosterWidget extends StatelessWidget {
  const _TopPosterWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        ClipRRect(
          borderRadius: const BorderRadius.only(
              bottomLeft: Radius.circular(20),
              bottomRight: Radius.circular(20)),
          child: Image.asset(
            'assets/post/shapkaTwo.jpg',
          ),
        ),
        Positioned(
          right: 12,
          bottom: 10,
          child: Container(
            width: 70,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(16),
                color: colors.bcgRating),
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
              child: Row(
                children: [
                  const Icon(
                    Icons.star_border,
                    color: colors.rating,
                  ),
                  const SizedBox(
                    width: 4,
                  ),
                  Text(
                    '9.5',
                    style: const TextStyle(
                        color: colors.rating,
                        fontSize: 15,
                        fontWeight: FontWeight.bold),
                  )
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

class _MovieNameWidget extends StatelessWidget {
  const _MovieNameWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Stack(
          children: [
            Image.asset(
              'assets/post/homen3.webp',
              width: 100,
            ),
          ],
        ),
        Text('Spiderman No Way Home', style: TextStyle(fontSize: 20))
      ],
    );
  }
}

Answer 1

使用堆栈尝试以下代码

class MovieDetailsInfo extends StatelessWidget {
  const MovieDetailsInfo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        alignment: Alignment.bottomCenter,
        children: [
          Container(width: MediaQuery.of(context).size.width, height: 270, child: _TopPosterWidget()),
          _MovieNameWidget(),
        ],
      ),
    );
  }
}

class _TopPosterWidget extends StatelessWidget {
  const _TopPosterWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        ClipRRect(
            borderRadius: const BorderRadius.only(bottomLeft: Radius.circular(20), bottomRight: Radius.circular(20)),
            child: Image.asset(
              "images/b.jpg",
              fit: BoxFit.fill,
              width: 400,
            )),
        Positioned(
          right: 12,
          bottom: 70,
          child: Container(
            width: 70,
            decoration: BoxDecoration(borderRadius: BorderRadius.circular(16), color: Colors.red),
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
              child: Row(
                children: [
                  const Icon(
                    Icons.star_border,
                    color: Colors.pink,
                  ),
                  const SizedBox(
                    width: 4,
                  ),
                  Text(
                    '9.5',
                    style: const TextStyle(color: Colors.orange, fontSize: 15, fontWeight: FontWeight.bold),
                  )
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

class _MovieNameWidget extends StatelessWidget {
  const _MovieNameWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 10),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Stack(
            alignment: Alignment.bottomCenter,
            children: [Image.asset("images/a.jpg")],
          ),
          Expanded(child: Text('Spiderman No Way Home', style: TextStyle(fontSize: 20)))
        ],
      ),
    );
  }
}