flutter 展开的小部件在列和行中未按预期工作

ifmq2ha2 于 2023-03-04 发布在 Flutter

关注(0)|答案(5)|浏览(177)

- 注意。**这只是一个示例，用于简化我想要实现的目标。

我想用一个黄色的容器来填充这个空间：

所以我做了一个容器，用Expanded小部件将其 Package 起来，以填充整个空间，这就是我得到的结果：

守则：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
  decoration:
      BoxDecoration(border: Border.all(width: 5, color: Colors.black)),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            width: 300,
            height: 300,
            color: Colors.blue,
            alignment: Alignment.center,
            child: Text('300x300')),
          Column(mainAxisSize: MainAxisSize.min, children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.green,
              alignment: Alignment.center,
              child: Text('100x100')),
            Expanded(
              child: Container(width: 100, color: Colors.amber),
            )
            ],
          )
        ],
      ),
    );
  }

我想达到的目标是这样的：

此形状的代码：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
      decoration:
      BoxDecoration(border: Border.all(width: 5, color: Colors.black)),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            width: 300,
            height: 300,
            color: Colors.blue,
            alignment: Alignment.center,
            child: Text('300x300')),
          Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                width: 100,
                height: 100,
                color: Colors.green,
                alignment: Alignment.center,
                child: Text('100x100')),
              Container(
                width: 100,
                height: 200,
                color: Colors.amber,
                alignment: Alignment.center,
                child: Text('100x200')),
            ],
          )
        ],
      ),
    );
  }

如果我知道高度和宽度，那么我可以设计这个形状。但是，如果我不知道蓝色容器的高度呢？
我认为这是Expanded的一个问题，应该得到解决。
Expanded小部件应将其子小部件扩展到其父小部件的限制边界，而不是将其父小部件也扩展!!

- 已编辑**

我会向任何不理解我的问题的人解释我的实际问题：

我有一个评论列表，我想要的是评论旁边的绿线填充到评论小部件末尾的高度。
所以我不能为注解设置固定的大小，因为我可能有一个带有长字符串的注解，所以行不会填充到注解文本的末尾，这将超出它的限制。

flutter

来源：https://stackoverflow.com/questions/64235671/expanded-widget-not-working-as-expected-inside-columns-and-rows

5条答案

按热度按时间

zdwk9cvp1#

最后，我可以使用IntrinsicHeight小部件来解决这个问题。
我只是用它 Package 了我的Container，然后Expanded小部件就可以按预期工作了。

最终用户界面：

代码如下：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IntrinsicHeight(
        child: Container(
          decoration:
              BoxDecoration(border: Border.all(width: 5, color: Colors.black)),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                  width: 300,
                  height: 300,
                  color: Colors.blue,
                  alignment: Alignment.center,
                  child: Text('300x300')),
              Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Container(
                      width: 100,
                      height: 100,
                      color: Colors.green,
                      alignment: Alignment.center,
                      child: Text('100x100')),
                  Expanded(
                    child: Container(width: 100, color: Colors.amber),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }

赞(0）回复(0）举报 2023-03-04

u3r8eeie2#

试一次

new Container(
            color: Colors.red,
            child: new Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  new Container(
                    height: 200,
                    child: new Row(
                      children: <Widget>[
                        Expanded(
                          flex: 1,
                          child: Container(
                              //width: 100,
                              //height: 300,
                              color: Colors.blue,
                              alignment: Alignment.center,
                              child: Text('300x300')),
                        ),
                        Column(
                          children: [
                            Expanded(
                              flex: 2,
                              child: Container(
                                  width: 100,
                                  // height: 100,
                                  color: Colors.green,
                                  alignment: Alignment.center,
                                  child: Text('100x100')),
                            ),
                            Expanded(
                              flex: 4,
                              child: Container(
                                  width: 100,
                                  //height: 200,
                                  color: Colors.amber,
                                  alignment: Alignment.center,
                                  child: Text('100x200')),
                            ),
                          ],
                        )
                      ],
                    ),
                  )
                ]))

赞(0）回复(0）举报 2023-03-04

hvvq6cgz3#

您可以将行 Package 在具有固定高度的Container中，这样您的Expanded就不会填充父高度（在本例中为Scaffold）
编辑：

@override
Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: 300,
        width: MediaQuery.of(context).size.width,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
                width: 300,
                height: 300,
                color: Colors.blue,
                alignment: Alignment.center,
                child: Text('300x300')),
            Column(
              children: [
                Container(
                    width: 100,
                    height: 100,
                    color: Colors.green,
                    alignment: Alignment.center,
                    child: Text('100x100')),
                Expanded(
                  child: Container(width: 100, color: Colors.amber),
                )
              ],
            )
          ],
        ),
      )
    );
  }

赞(0）回复(0）举报 2023-03-04

aiqt4smr4#

我用过你的代码并做了一些修改。扩展没有问题，但可能对你没有用。
我编辑的代码：

class CustomContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var height = MediaQuery.of(context).size.height;
    return Scaffold(
      body: Container(
        height: height,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.max,
          children: [
            Container(
                width: MediaQuery.of(context).size.width*0.5,
                height: height,
                color: Colors.blue,
                alignment: Alignment.center,
                child: Text('300x300')),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                    width: MediaQuery.of(context).size.width*0.5,
                    height: height*0.5,
                    color: Colors.green,
                    alignment: Alignment.center,
                    child: Text('100x100')),
                Container(
                    width: MediaQuery.of(context).size.width*0.5,
                    height: height*0.5,
                    color: Colors.amber,
                    child: Text('Remaining'))
              ],
            )
          ],
        ),
      ),
    );
  }
}

我的输出

如果你看到代码，我没有硬编码宽度或高度，我使用MediaQuery来获取屏幕大小和宽度。

var height = MediaQuery.of(context).size.height*0.5;

此行对于定义行高很重要。子行将自动调整到指定的高度。
现在，您可以随意选择高度和宽度。下面是我的其他输出。

赞(0）回复(0）举报 2023-03-04

icnyk63a5#

像这样的自包含的例子对我来说很有效，请根据您的需要随时调整填充和边距等：

粗略代码：

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 16),
      child: Table(
        columnWidths: const {
          0: FixedColumnWidth(40), // Width of avatar
          1: FixedColumnWidth(16), // padding
          2: FlexColumnWidth(1), // white box
        },
        children: [
          TableRow(
            children: [
              TableCell(
                verticalAlignment: TableCellVerticalAlignment.fill,
                child: Stack(
                  children: [
                    // NOTE: Added empty column needed to fix render bug
                    // with Expanded in release build only.
                    Column(
                      children: [
                        Expanded(
                          child: Container(
                            margin: const EdgeInsets.only(
                              left: 20,
                              bottom: 8,
                              top: 48,
                            ),
                            color: Colors.blue,
                            width: 2,
                          ),
                        ),
                      ],
                    ),
                    Container(
                      alignment: Alignment.topLeft,
                      child: Padding(
                        padding: const EdgeInsets.only(bottom: 0),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          children: const [
                            CircleAvatar(
                              backgroundColor: Colors.yellow,
                              radius: 20,
                            )
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              const TableCell(child: SizedBox.shrink()),
              TableCell(
                child: Container(
                  color: Colors.transparent,
                  child: Column(
                    children: [
                      Container(
                        width: double.infinity,
                        padding: const EdgeInsets.fromLTRB(16, 0, 0, 12),
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(
                            16,
                          ),
                        ),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: const [
                            Text(
                                "This is some comment text that goes onto several lines and may be great or may be not!"),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

赞(0）回复(0）举报 2023-03-04

我来回答

flutter 展开的小部件在列和行中未按预期工作

5条答案

粗略代码：

相关问题

热门标签

最新问答