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

问题描述

我在 Flutter 中的布局仍然有点问题.
现在我想在象限布局中在 3 个小部件之间共享可用空间.宽度均匀共享(通过一行中的 2 个 Expanded 小部件可以正常工作)，但现在我还希望高度自动调整，因此 widget3.height == widget1.height + widget2.高度.如果 widget3 的内容较大，我希望 widget1 和 widget2 调整它们的高度，反之亦然.

这在 Flutter 中是否可行?

解决方案

看看

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

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.

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 Row/Column - 共享宽度，扩展高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！