Flutter Layout Row / Column - 共享宽度，扩展高度

Posted 2023-02-23

【中文标题】Flutter Layout Row / Column - 共享宽度，扩展高度

【英文标题】：Flutter Layout Row / Column - share width, expand height

【发布时间】：2018-12-21 21:31:15

【问题描述】：

我在 Flutter 中的布局仍然有些麻烦。 现在我想在象限布局中在 3 个小部件之间共享可用空间。 宽度是均匀共享的（这可以通过一行中的 2 个Expanded 小部件正常工作），但现在我还希望高度自动调整，所以widget3.height == widget1.height + widget2.height。 如果widget3的内容较大，我希望widget1和widget2调整高度，反之亦然。

这在 Flutter 中是否可行？

【参考方案1】：

看看IntrinsicHeight;包装根 Row 应该提供您正在寻找的效果：

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)),
        ]),
      ),
    );
  

调整列中容器的高度会导致右侧容器调整大小以匹配：

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

【讨论】：

太棒了，以前从未听说过IntrinsicHeight！

您确定没有其他方法可以做到这一点吗？因为在官方文档中说不要使用这个Widget，因为它太贵了。

IntrinsicHeight 上的颤振文档中的注释：This class is relatively expensive. Avoid using it where possible.

它很昂贵，但我认为 Flutter 没有提供任何其他更好更快的方式。

可以在列表中使用吗？ @matt-s

【参考方案2】：

我是新来的颤振。如果我在这里做错了什么，请纠正我。我认为不使用 IntrinsicHeight 也可以使用 setState(()) 来实现。

import 'package:flutter/material.dart';

void main() 
  runApp(MyApp());
`enter code here`

class MyApp extends StatefulWidget 
  @override
  State<StatefulWidget> createState() 
    return MyAppState();
  


class MyAppState extends State<MyApp> 
  @override
  Widget build(BuildContext context) 
    double h1 = 100;
    double h2 = 200;
    double h3;
    setState(() 
      h3 = h1 + h2;
    );
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Padding(
            padding: const EdgeInsets.only(top: 100.0),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Expanded(
                  child: Column(
                    children: [
                      Container(
                        color: Colors.green,
                        height: h1,
                      ),
                      Container(
                        color: Colors.orange,
                        height: h2,
                      )
                    ],
                  ),
                ),
                Expanded(
                  child: Container(
                    color: Colors.yellow,
                    height: h3,
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  

Find image here

代码也可以在这里找到：https://gist.github.com/Amrit0786/9d228017c2df6cf277fbbaa4a6b20e83

【讨论】：

如果你有一个大的应用程序，你会想尽可能限制StatefulWidget。或者，使用带有内置解决方案的StatelessWidget。使用 Stateful 进行布局在技术上并没有错，但除非别无选择，否则不应使用它。

我想了解为什么你在构建中使用 setstate ??!!哇....！

【参考方案3】：

我认为您可以设置行的高度，然后您只需设置列容器的高度，并且使用 crossAxisAlignment: CrossAxisAlignment.stretch 将展开第二行占据他父母的身高：

SizedBox(
 height: 100,
 child: Row(
 crossAxisAlignment: CrossAxisAlignment.stretch,
 children: [
  Expanded(
    child: Column(
      children: [
        Expanded( //If you dont have the height you can expanded with flex
          flex: 1,
          child: Container(
            height: 50,
            color: Colors.blue,
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
            height: 50,
            color: Colors.red,
          ),
        )
      ],
    ),
  ),
  Expanded(
    child: Container(
      color: Colors.yellow,
    ),
   )
  ],
 ),
),