Flutter Layout行/列-共享宽度，扩展高度 [英] Flutter Layout Row / Column - share width, expand height

问题描述

在Flutter中，布局仍然有些麻烦.
现在，我要以象限布局在3个小部件之间共享可用空间. 宽度是平均分配的(通过连续2个Expanded小部件可以正常工作)，但是现在我还希望高度自动调整，因此widget3.height == widget1.height + widget2.height即可. 如果widget3的内容较大，我希望widget1和widget2调整其高度，反之亦然.

I'm still having a bit of trouble with the layouting in Flutter.
Right now I want to have the available space shared between 3 widgets, in a quadrant layout. The width is evenly shared (this works fine via 2 Expanded widgets in a Row), but now I also want the height to adjust automatically so widget3.height == widget1.height + widget2.height. If the content of widget3 is larger, I want widget1 and widget2 to adjust their height and vice versa.

在Flutter中甚至有可能吗?

Is this even possible in Flutter?

推荐答案

看看

Have a look at IntrinsicHeight; wrapping the root Row should provide the effect you're looking for:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('Rows & Columns')),
        body: RowsAndColumns(),
      ),
    );
  }
}

class RowsAndColumns extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 100.0),
      child: IntrinsicHeight(
        child: Row(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
          Expanded(
            child: Column(children: [
              Container(height: 120.0, color: Colors.yellow),
              Container(height: 100.0, color: Colors.cyan),
            ]),
          ),
          Expanded(child: Container(color: Colors.amber)),
        ]),
      ),
    );
  }
}

调整列中容器的高度会使右侧的容器调整大小以匹配:

Adjusting the heights in the containers in the column cause the container on the right to resize to match:

https://gist.github.com/mjohnsullivan/c5b661d7b3b4ca00599e8ef87ff6ac61

这篇关于Flutter Layout行/列-共享宽度，扩展高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！