dart 如何基于另一个灵活的Widget动态增加Flutter Row Widget中Widget的高度

xfb7svmp 于 2023-09-28 发布在 Flutter

关注(0)|答案(1)|浏览(154)

我有一个布局，其中Row小部件中有两个子部件，这两个部件都是灵活的小部件。左侧小部件包含红色和蓝色小部件，我想根据右侧小部件的高度增加蓝色小部件的高度（这是一个灵活的小部件，flex值为7）。

**Ex1：**根据右侧控件的高度动态调整蓝色控件的高度（flex值为7）。
**例2：**左侧高度=右侧高度

body: Column(
  children: [
    Container(color: Colors.green, height: 40),
    Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Flexible(
          flex: 3,
          child: Stack(
            alignment: AlignmentDirectional.center,
            children: [
              Column(
                children: [
                  Container(
                    color: Colors.red,
                    height: 20,
                  ),
                  Container(
                    color: Colors.blue,
                    height: 50, // I want to dynamically adjust this height
                  ),
                ],
              ),
            ],
          ),
        ),
        Flexible(
          flex: 7,
          child: Container(
            color: Colors.yellow,
            child: Column(
              children: [1, 2, 3]
                .map((e) => ListTile(
                  title: Text('testing - $e'),
                ))
                .toList(),
            ),
          ),
        ),
      ],
    ),
    Container(color: Colors.grey, height: 50),
  ],
),

我尝试了这个解决方案它的工作，但我必须重建后，右侧的小部件构建的页面。否则，蓝色小部件最初不可见。

final rightFlexibleKey = GlobalKey();

// Get the render box
  RenderBox? get rightBox => rightFlexibleKey.currentContext?.findRenderObject() as RenderBox?;

// Calculate blue height
  double get blueHeight {
    if (rightBox != null) {
      return rightBox!.size.height - 20;
    }
    return 0;
  }

dart

来源：https://stackoverflow.com/questions/77073937/how-to-dynamically-increase-the-height-of-a-widget-in-a-flutter-row-widget-based

1条答案

按热度按时间

vecaoik11#

也许你需要IntrinsicHeight。
这个小部件帮助它的孩子调整自己的高度依赖。但请记住，IntrinsicHeight是昂贵的小部件。

Column(
      children: [
        Container(color: Colors.green, height: 40),
        IntrinsicHeight(
          child: Row(
            children: [
              Flexible(
                flex: 3,
                child: Column(
                  children: [
                    Flexible(
                      child: Stack( // I don't know why you need Stack here. If you don't need, we can remove Column -> Flexible -> Stack 
                        children: [
                          Column(
                            children: [
                              Container(
                                color: Colors.red,
                                height: 20,
                              ),
                              Flexible(
                                child: Container(
                                  color: Colors.blue,
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              Flexible(
                flex: 7,
                child: Container(
                  color: Colors.yellow,
                  child: Column(
                    children: [1, 2, 3]
                        .map((e) => ListTile(
                      title: Text('testing - $e'),
                    ))
                        .toList(),
                  ),
                ),
              ),
            ],
          ),
        ),
        Container(color: Colors.grey, height: 50),
      ],
    )

赞(0）回复(0）举报 2023-09-28

我来回答

dart 如何基于另一个灵活的Widget动态增加Flutter Row Widget中Widget的高度

1条答案

相关问题

热门标签

最新问答