Question

我想让我的容器响应图像大小，但不知何故它不起作用。

下面是我制作的容器-：

Container(
              height: size.height * 0.7,
              width: size.width * 0.95,
              decoration: BoxDecoration(
                // borderRadius: BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10)),
                image: DecorationImage(
                  image: AssetImage('assets/vir.gif'),//widget.user.imgUrl),
                  fit: BoxFit.contain,
                ),
              ),
              child: Container(
                decoration: BoxDecoration(
                  // borderRadius: BorderRadius.circular(10),
                  boxShadow: [
                    BoxShadow(color: Colors.black12, spreadRadius: 0.5),
                  ],
                ),
              ),
            ),

在这里，如果图像的高度与容器相同，则很好，但如果高度较小，则我可以看到我不想要的背景。

即使我在容器中添加任何信息，高度也保持固定并且不会调整到内容。

下面是另一个例子 -:

 Container(
              height: size.height * 0.2,
              width: size.width * 0.95,
              decoration: BoxDecoration(
                color: Colors.pink[100],
              ),
              child: Column(
                children: [

                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 15),
                    child: Wrap(
                        spacing: 10,
                        children: [

                          Chip(
                            elevation: 5,
                            label: Text('Height'),
                            labelStyle: TextStyle(
                              color: Colors.white,
                              fontSize: 17,
                            ),
                            backgroundColor: Colors.pinkAccent,
                            deleteIcon: Icon(Icons.height),
                            // labelPadding: EdgeInsets.symmetric(horizontal: 10),
                          ),

                          Chip(
                            elevation: 5,
                            label: Text('Active'),
                            labelStyle: TextStyle(
                              color: Colors.white,
                              fontSize: 17,
                            ),
                            backgroundColor: Colors.pinkAccent,
                            labelPadding: EdgeInsets.symmetric(horizontal: 10),
                          ),

                          Chip(
                            elevation: 5,
                            label: Text('Start Sign'),
                            labelStyle: TextStyle(
                              color: Colors.white,
                              fontSize: 17,
                            ),
                            backgroundColor: Colors.pinkAccent,
                            labelPadding: EdgeInsets.symmetric(horizontal: 10),
                          ),


                        ]
                    ),
                  )



                ],
              ),
            ),

在这里，如果我添加或删除任何内容，则必须手动增加或减少大小。有人可以帮我吗？

Answer 1

您不需要提供高度或与。容器适应孩子的大小。

Docs：

<块引用>

否则，widget 有一个孩子，但没有高度，没有宽度，没有约束，没有对齐，并且容器通过从父级到子级的约束和自身大小以匹配孩子。

Flutter Widget of the week

Answer 2

import 'package:flutter/material.dart';

void main() {
  runApp(
  MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: Text('Hello'),
      centerTitle: true,
    ),
    body: Container(
      alignment: Alignment.center,
      child: Container(
        height: 200,
        width: 200,
        child: Image(
          image: NetworkImage(
              'https://images.unsplash.com/photo-1593642634402-b0eb5e2eebc9? 
               ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb- 
               1.2.1&auto=format&fit=crop&w=1050&q=80'),
          fit: BoxFit.cover,
        ),
      ),
    ),
  ),
 ),
 );
 }

如何在颤振中制作响应式容器

2 个答案: