Question

即使在这个黑色容器溢出后，我仍然在堆栈中夹到硬边上，如果我合适，我该如何解决这个问题：BoxFit.fill 图像被拉伸。我尝试将堆栈包裹在容器或卡片中，然后夹在也不起作用的 haredge 中

这是我试过的代码

 Stack(
      children: [
        Container(
          clipBehavior: Clip.hardEdge,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(15),
            image: DecorationImage(
                image: AssetImage(widget.image), fit: BoxFit.fill),
          ),
        ),
        Positioned(
          left: 0,
          right: 0,
          bottom: 0,
          child: Container(
            height: 43,
            width: 162,
             decoration: BoxDecoration(
                color: Colors.black.withOpacity(0.35),
                borderRadius: const BorderRadius.only(bottomLeft: Radius.circular(15),bottomRight: Radius.circular(15)),
             ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(widget.info,style: RecentChats.likedetails,),
                      Padding(
                        padding: const EdgeInsets.only(left: 3),
                        child: Container(
                          height: 4,
                          width: 4,
                          decoration: const BoxDecoration(
                            color: DatingColoCodes.blue,
                            shape: BoxShape.circle,
                          ),
                        ),
                      ),
                    ],
                  ),
                  Text(widget.view,style: RecentChats.viewprofile,),
                ],
              )),
        )
      ],
    );

Answer 1

无法使用给定的代码段进行复制，当我运行它时它对我来说效果很好，也许尝试放置完整的代码段？

但无论如何，您可以在没有 Stack 小部件的情况下实现相同的行为，只需将 Text 作为持有图像的 Container 的子项。

这是工作示例，您可以复制粘贴并run in DartPad

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: const EdgeInsets.all(30),
        child: GridView.count(
          crossAxisCount: 2,
          crossAxisSpacing: 20,
          mainAxisSpacing: 8,
          childAspectRatio: 0.8,
          children: [
            for (int i=0; i<20; i++)
              Container(
                clipBehavior: Clip.hardEdge,
                decoration: BoxDecoration(
                  color: Colors.green,
                  borderRadius: BorderRadius.circular(20),
                  image: DecorationImage(
                    image: NetworkImage('https://source.unsplash.com/random'),
                    fit: BoxFit.cover,
                  ),
                ),
                /// For some reason, GridView / Container are stretching
                /// the height, forcing it to be in full height so we gotta
                /// do some hack, we put a Column, and then put the Container
                /// with the texts inside the Column as well and make the height
                /// as height as the item height by using `MainAxisSize.min`.
                ///
                /// The first Column is to position the Container inside it to
                /// the bottom of the item (see: `MainAxisAlignment.end`) and force
                /// the width to be full width by using `CrossAxisAlignment.stretch`
                ///
                /// Lastly, we do a `Clip.hardEdge` to prevent the text container
                /// to apear sharp-squared and follow the roundness of the parent
                /// container instead.
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    Container(
                      color: Colors.red.withOpacity(0.70),
                      padding: const EdgeInsets.symmetric(vertical: 8),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Text('Hello item $i'),
                          Text('Washington DC'),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
          ],
        ),
      ),
    );
  }
}

旁注：当我说“强制它为全高”时，这意味着添加高度属性根本不起作用，这就是为什么我用一列代替。

堆栈儿童在图像上溢出

1 个答案: