【问题标题】:How to fit Container in Row如何将容器放入行中
【发布时间】:2020-06-25 02:02:07
【问题描述】:

我要问一个关于颤振的问题。

查看捕获,我希望左右容器的高度与较长的容器的高度匹配。

由于我们必须适应更长的高度,我们希望以不声明高度的方式实现它。

希望有人能帮我解决这个问题。

谢谢。

this is a capture

这是我的代码

import 'package:flutter/material.dart';

class RowTest extends StatefulWidget {
  @override
  _RowTestState createState() => _RowTestState();
}

class _RowTestState extends State<RowTest> {
  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;

    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: const Text('simple Page'),
            ),
            body: ListView(
              shrinkWrap: true,
              children: <Widget>[
                Container(
                  color: Colors.blue,
                  child: Column(
                    children: <Widget>[
                      Container(
                          child: Column(
                        children: <Widget>[
                          for (int i = 0; i < 5; i++)
                            Row(
                              children: <Widget>[
                                Container(
                                  width: 141,
                                  margin: EdgeInsets.fromLTRB(size.width * 0.1,
                                      8, size.width * 0.05, 8),
                                  padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                                  decoration: BoxDecoration(
                                    border: Border.all(
                                      color: Color(0xff939393),
                                    ),
                                    color: Colors.red,
                                    borderRadius:
                                        BorderRadius.all(Radius.circular(5)),
                                  ),
                                  child: Center(
                                    child: Text(
                                      'testededed',
                                      textAlign: TextAlign.center,
                                      textScaleFactor: 1.0,
                                      style: TextStyle(
                                          fontSize: 16,
                                          height: 1.5,
                                          color: Colors.white),
                                    ),
                                  ),
                                ),
                                Container(
                                  width: 141,
                                  margin: EdgeInsets.fromLTRB(size.width * 0.05,
                                      8, size.width * 0.1, 8),
                                  padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                                  decoration: BoxDecoration(
                                    border: Border.all(
                                      color: Color(0xff939393),
                                    ),
                                    color: Colors.red,
                                    borderRadius:
                                        BorderRadius.all(Radius.circular(5)),
                                  ),
                                  child: Center(
                                    child: Text(
                                      'testesttaaaaaaaaaaaaest',
                                      textAlign: TextAlign.center,
                                      textScaleFactor: 1.0,
                                      style: TextStyle(
                                          fontSize: 16,
                                          height: 1.5,
                                          color: Colors.white),
                                    ),
                                  ),
                                ),
                              ],
                            )
                        ],
                      )),
                    ],
                  ),
                )
              ],
            )));
  }
}

【问题讨论】:

  • 我建议查看gridView,这个问题是一个很好的起点:stackoverflow.com/questions/48405123/…
  • @steve kim,你试过 GridView 了吗?
  • @Darish 是的。我尝试使用gridview。高度保持不变,但它太长了。我正在寻找一种将高度保持为文本的方法。
  • 能否请您张贴gridview 的屏幕截图?你说的“太长”是什么意思??你能再解释一下吗
  • @Darish,是的。这是捕获的图像链接link如果您检查图像,“太长”意味着与输入文本的长度相比高度太长。我正在寻找一种方法来改变这个高度以适应文本高度。

标签: flutter dart layout


【解决方案1】:

如果您使用: Row (with mainAxisSize max) > Expanded > Container,容器将适合整行

如果您使用: Column > Expanded > Container,容器将适合整个列

如果您使用: Column > Row (with mainAxisSize max) > Expanded > Container, Container, Container,这3个容器将以相同的宽度适合整行

如果您使用: Scaffold > Stack (with fit> StackFit.expand) > Expanded > Container,stack会尽量适应整个scaffold,container会适应stack

【讨论】:

    【解决方案2】:

    crossAxisAlignment: CrossAxisAlignment.start 用作树的根Column

         Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
    

    【讨论】:

      【解决方案3】:

      很抱歉延迟回复,因为我有几件事重叠。

      我使用 IntrinsicHeight 解决了它。

      感谢所有帮助 cmets 的人。

      
      class RowTest extends StatefulWidget {
        @override
        _RowTestState createState() => _RowTestState();
      }
      
      class _RowTestState extends State<RowTest> {
        @override
        Widget build(BuildContext context) {
          final Size size = MediaQuery.of(context).size;
      
          return MaterialApp(
              home: Scaffold(
                  appBar: AppBar(
                    title: const Text('simple Page'),
                  ),
                  body: ListView(
                    shrinkWrap: true,
                    children: <Widget>[
                      Container(
                        color: Colors.blue,
                        child: Column(
                          children: <Widget>[
                            Container(
                                child: Column(
                              children: <Widget>[
                                for (int i = 0; i < 5; i++)
                                  IntrinsicHeight(
                                    child: Row(
                                      children: <Widget>[
                                        Container(
                                          width: 141,
                                          margin: EdgeInsets.fromLTRB(
                                              size.width * 0.1,
                                              8,
                                              size.width * 0.05,
                                              8),
                                          padding:
                                              EdgeInsets.fromLTRB(10, 10, 10, 10),
                                          decoration: BoxDecoration(
                                            border: Border.all(
                                              color: Color(0xff939393),
                                            ),
                                            color: Colors.red,
                                            borderRadius:
                                                BorderRadius.all(Radius.circular(5)),
                                          ),
                                          child: Center(
                                            child: Text(
                                              'testededed',
                                              textAlign: TextAlign.center,
                                              textScaleFactor: 1.0,
                                              style: TextStyle(
                                                  fontSize: 16,
                                                  height: 1.5,
                                                  color: Colors.white),
                                            ),
                                          ),
                                        ),
                                        Container(
                                          width: 141,
                                          margin: EdgeInsets.fromLTRB(
                                              size.width * 0.05,
                                              8,
                                              size.width * 0.1,
                                              8),
                                          padding:
                                              EdgeInsets.fromLTRB(10, 10, 10, 10),
                                          decoration: BoxDecoration(
                                            border: Border.all(
                                              color: Color(0xff939393),
                                            ),
                                            color: Colors.red,
                                            borderRadius:
                                                BorderRadius.all(Radius.circular(5)),
                                          ),
                                          child: Center(
                                            child: Text(
                                              'testesttaaaaaaaaaaaaest',
                                              textAlign: TextAlign.center,
                                              textScaleFactor: 1.0,
                                              style: TextStyle(
                                                  fontSize: 16,
                                                  height: 1.5,
                                                  color: Colors.white),
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  )
                              ],
                            )),
                          ],
                        ),
                      )
                    ],
                  )));
        }
      }
      
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2021-12-10
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-08-02
        • 1970-01-01
        • 2020-06-16
        相关资源
        最近更新 更多