颤振大小的容器到其中的内容答案

【问题标题】：Flutter size container to content within it颤振大小的容器到其中的内容
【发布时间】：2022-01-14 01:44:20
【问题描述】：

我正在尝试在我的小部件中创建一个框，该框将根据其中发布的内容动态调整大小，但它似乎在遇到溢出时被截断。

Padding _buildReviewsSnapshot(Tasker user) {
    return Padding(
        padding: const EdgeInsets.symmetric(horizontal: 5.0),
        child: Row(
          children: [
            Expanded(
                // flex: 3,
                child: GridView.count(
              crossAxisCount: 2,
              shrinkWrap: true,
              children: List.generate(6, (index) {
                return Container(
                    decoration: BoxDecoration(
                        border: Border.all(
                            color: const Color.fromRGBO(212, 221, 230, 1)),
                        borderRadius:
                            const BorderRadius.all(Radius.circular(20))),
                    margin: const EdgeInsets.all(6),
                    clipBehavior: Clip.antiAlias,
                    child: Padding(
                      padding: const EdgeInsets.all(10.0),
                      child: Column(children: [
                        Row(children: const [
                          Icon(
                            Icons.star_rate,
                            size: 16,
                            color: Colors.amber,
                          ),
                          Icon(
                            Icons.star_rate,
                            size: 16,
                            color: Colors.amber,
                          ),
                          Icon(
                            Icons.star_rate,
                            size: 16,
                            color: Colors.amber,
                          ),
                          Icon(
                            Icons.star_rate,
                            size: 16,
                            color: Colors.amber,
                          ),
                          Icon(
                            Icons.star_border,
                            size: 16,
                            color: Colors.grey,
                          ),
                        ]),
                        const SizedBox(height: 10),
                        Text(
                            "Charlee wasn’t present at the job but we had extremely clear instructions on what to do and how to do it. Would highly recommend as the attention to detail was spot on",
                            style: Theme.of(context).textTheme.bodyText1),
                        Text("- Charlee R",
                            style: Theme.of(context).textTheme.bodyText2),
                      ]),
                    ));
              }),
            )),
          ],
        ));
  }

【问题讨论】：

尝试用Flexible包裹Text
这会导致溢出，我所追求的是让带有边框的容器扩大或缩小到内容的大小
您能否添加屏幕截图，说明哪种类型的错误或您的实际结果？
@BossNass 你可以使用 IntrinsicHeight，请参考这个，api.flutter.dev/flutter/widgets/IntrinsicHeight-class.html
所有容器的大小或动态是否相同？

标签： flutter flutter-layout containers expand

【解决方案1】：

您可以使用 `Flexible' 使容器根据其内容改变其大小

*Edit 好像理解错了，抱歉。尝试将我之前提到的Flexible 更改为Wrap 小部件。

【讨论】：

【解决方案2】：

试试下面的代码希望它对你有帮助。有两种显示输出的方式

如果您显示您可以使用的内容的全文 SingleChildScrollView() 把你的 Column() 包裹在里面 SingleChildScrollView() 参考here

SingleChildScrollView(
        child: Column(
          children: [
            Row(
              children: const [
                Icon(
                  Icons.star_rate,
                  size: 16,
                  color: Colors.amber,
                ),
                Icon(
                  Icons.star_rate,
                  size: 16,
                  color: Colors.amber,
                ),
                Icon(
                  Icons.star_rate,
                  size: 16,
                  color: Colors.amber,
                ),
                Icon(
                  Icons.star_rate,
                  size: 16,
                  color: Colors.amber,
                ),
                Icon(
                  Icons.star_border,
                  size: 16,
                  color: Colors.grey,
                ),
              ],
            ),
            const SizedBox(
              height: 10,
            ),
            Text(
              "Charlee wasn’t present at the job but we had extremely clear instructions on what to do and how to do it. Would highly recommend as the attention to detail was spot on",
              style: Theme.of(context).textTheme.bodyText1,
            ),
            Text(
              "- Charlee R",
              style: Theme.of(context).textTheme.bodyText2,
            ),
          ],
        ),
      ),

您使用 SingleChildScrollView 的结果屏幕 ->

在Expanded 中添加您的Text 小部件@ 参考Expanded 小部件here：

  Expanded(
        child: Text(
          "Charlee wasn’t present at the job but we had extremely clear instructions on what to do and how to do it. Would highly recommend as the attention to detail was spot on",
          style: Theme.of(context).textTheme.bodyText1,
        ),
      ),

您的结果屏幕使用 Expanded->

【讨论】：

这仍然没有将容器缩放到内容

【解决方案3】：

如果您希望所有容器大小相同，请使用此代码。如果不检查第二个答案：-

答案1：-

Padding(
          padding: const EdgeInsets.symmetric(horizontal: 5.0),
          child: Row(
            children: [
              Expanded(
                  // flex: 3,
                  child: GridView.count(
                crossAxisCount: 2,
                shrinkWrap: true,
                children: List.generate(6, (index) {
                  return Container(
                      decoration: BoxDecoration(
                          border: Border.all(
                              color: const Color.fromRGBO(212, 221, 230, 1)),
                          borderRadius:
                              const BorderRadius.all(Radius.circular(20))),
                      margin: const EdgeInsets.all(6),
                      clipBehavior: Clip.antiAlias,
                      child: Padding(
                        padding: const EdgeInsets.all(10.0),
                        child: Column(children: [
                          Row(children: const [
                            Icon(
                              Icons.star_rate,
                              size: 16,
                              color: Colors.amber,
                            ),
                            Icon(
                              Icons.star_rate,
                              size: 16,
                              color: Colors.amber,
                            ),
                            Icon(
                              Icons.star_rate,
                              size: 16,
                              color: Colors.amber,
                            ),
                            Icon(
                              Icons.star_rate,
                              size: 16,
                              color: Colors.amber,
                            ),
                            Icon(
                              Icons.star_border,
                              size: 16,
                              color: Colors.grey,
                            ),
                          ]),
                          const SizedBox(height: 10),
                          Text(
                            "Charlee wasn’t present at the job but we had extremely clear instructions on what to do and how to do it. Would highly recommend as the attention to detail was spot on",
                            style: Theme.of(context).textTheme.bodyText1,
                            overflow: TextOverflow.ellipsis,
                            maxLines: 5,
                          ),
                          const SizedBox(height: 10),
                          SizedBox(
                            width: 150,
                            child: Text(
                              "- Charlee R",
                              style: Theme.of(context).textTheme.bodyText2,
                              textAlign: TextAlign.right,
                            ),
                          ),
                        ]),
                      ));
                }),
              )),
            ],
          )),

答案2：-

使用这个包flutter_staggered_grid_view。使用这个包使用可以创建这些类型的容器。

flutter_staggered_grid_view

输出：-

代码：-

import 'package:archive/UI/screens/home_screen.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Demo(),
    );
  }
}

class Demo extends StatelessWidget {
  String content =
      "Charlee wasn’t present at the job but we had extremely clear instructions on what to do and how to do it. Would highly recommend as the attention to detail was spot on";
  String content1 =
      "Charlee wasn’t present at the job but we had extremely clear instructions on what to do and how to do it. Would highly recommend as the attention to detail was spot on Charlee wasn’t present at the job but we had extremely clear instructions on what to do and how to do it. Would highly recommend as the attention to detail was spot on ";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 5.0),
          child: Row(
            children: [
              Expanded(
                // flex: 3,
                child: StaggeredGridView.countBuilder(
                    staggeredTileBuilder: (int index) => StaggeredTile.fit(1),
                    crossAxisCount: 2,
                    shrinkWrap: true,
                    itemBuilder: (BuildContext context, int index) {
                      return Container(
                          decoration: BoxDecoration(
                              border: Border.all(
                                  color:
                                      const Color.fromRGBO(212, 221, 230, 1)),
                              borderRadius:
                                  const BorderRadius.all(Radius.circular(20))),
                          margin: const EdgeInsets.all(6),
                          clipBehavior: Clip.antiAlias,
                          child: Padding(
                            padding: const EdgeInsets.all(10.0),
                            child: Column(children: [
                              Row(children: const [
                                Icon(
                                  Icons.star_rate,
                                  size: 16,
                                  color: Colors.amber,
                                ),
                                Icon(
                                  Icons.star_rate,
                                  size: 16,
                                  color: Colors.amber,
                                ),
                                Icon(
                                  Icons.star_rate,
                                  size: 16,
                                  color: Colors.amber,
                                ),
                                Icon(
                                  Icons.star_rate,
                                  size: 16,
                                  color: Colors.amber,
                                ),
                                Icon(
                                  Icons.star_border,
                                  size: 16,
                                  color: Colors.grey,
                                ),
                              ]),
                              const SizedBox(height: 10),
                              Text(
                                index.isEven ? content : content1,
                                style: Theme.of(context).textTheme.bodyText1,
                              ),
                              const SizedBox(height: 10),
                              SizedBox(
                                width: 150,
                                child: Text(
                                  "- Charlee R",
                                  style: Theme.of(context).textTheme.bodyText2,
                                  textAlign: TextAlign.right,
                                ),
                              ),
                            ]),
                          ));
                    }),
              ),
            ],
          )),
    );
  }
}

我希望这个答案对你有用。

【讨论】：

大小不一样，而是内容的高度
检查答案 2。我希望这对你有用，我将有资格获得赏金。
添加后，整个文件崩溃
100% 上面有一些错误，因为我不熟悉交错网格视图，所以我找不到它，但是当我们注释掉它的那一刻它就可以工作
这是我的荣幸。我有资格获得赏金吗？

【解决方案4】：

尝试使用 ConstrainedBox。它将父窗口小部件的大小调整为子窗口小部件的大小。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。