在Android中,match_parent和wrap_content用于自动调整小部件相对于其父部件所包含内容的大小。

在Flutter中,似乎默认所有小部件都设置为wrap_content,我如何改变它,以便我可以填充它的宽度和高度,以它的父?


当前回答

在列中使用这行代码。 对于wrap_content: mainAxisSize: mainaxisize .min 对于match_parent: mainAxisSize: mainaxisize .max

其他回答

对于匹配父选项,你可以用容器包装小部件,并给它一个这样的宽度

宽度:double.infinity

这种方法将使小部件填充屏幕上的最大可用空间。

简单的回答是,在子节点有尺寸之前,父节点没有尺寸。

The way layout works in Flutter is that each widget provides constraints to each of its children, like "you can be up to this wide, you must be this tall, you have to be at least this wide", or whatever (specifically, they get a minimum width, a maximum width, a minimum height, and a maximum height). Each child takes those constraints, does something, and picks a size (width and height) that matches those constraints. Then, once each child has done its thing, the widget can can pick its own size.

有些小部件试图尽量大,只要父组件允许。有些小部件试图尽量小,就像父组件所允许的那样。有些小部件试图匹配某种“自然”大小(例如文本、图像)。

一些小部件告诉它们的子部件可以是任意大小。有些人给他们的孩子同样的限制,他们从他们的父母。

匹配父

为了匹配或填充父对象(高度和宽度),我们可以在Container上使用额外的约束:

Container(
  constraints: BoxConstraints.expand(), // ← this guy
  child: Text('Center > Container > Text')
)

在Flutter中,约束是可以填充的空间(如果约束“严格”,则必须填充)。

约束条件是…不,实际上是父母强加的。

默认情况下,Container将把它的内容(child:)和大小本身包装到它的子元素中,除非被重写(或被严格的约束不允许)。

使用constraints:参数,我们可以给Container额外的约束来覆盖默认的Container约束行为(比如包装内容)。

使用Container(constraints: BoxConstraints.something)不会覆盖传入/父约束;它只是允许我们在允许的情况下重写默认行为,比如包装内容。


代码示例- BoxConstraints

下面是一个复制/粘贴代码示例,展示了我们可以应用到具有“松散”传入/父约束(由Center提供)的容器上的各种约束的效果。

import 'package:flutter/material.dart';

class MatchParentPage extends StatefulWidget {
  @override
  _MatchParentPageState createState() => _MatchParentPageState();
}

class _MatchParentPageState extends State<MatchParentPage> {
  BoxConstraints constraints;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Match Parent'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Expanded( // shares space constraint evenly with other Expanded
            child: Center( // ← fills tight parent constraint & loosens ↓ child constraint ↓
              child: Container( // got loose constraint from Center... 
                  constraints: constraints, // can apply many additional constraints
                  color: Colors.lightBlueAccent.withOpacity(.3),
                  child: Text('Center > Container > Text')),
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.orangeAccent,
                child: Wrap(
                    children: [
                      _button('default', null),
                      _button('*expand()', BoxConstraints.expand()),
                      _button('*tight(Size.infinite)', BoxConstraints.tight(Size.infinite)),
                      _button('tight(Size.zero)', BoxConstraints.tight(Size.zero)),
                      _button('tight(Size.fromHeight(100))', BoxConstraints.tight(Size.fromHeight(100))),
                      _button('tight(Size.fromWidth(100))', BoxConstraints.tight(Size.fromWidth(100))),
                      _button('tightForFinite(width: 100, height: 100)', BoxConstraints.tightForFinite(width: 100, height: 100)),
                      _button('loose(Size.infinite)', BoxConstraints.loose(Size.infinite)),
                      _button('tightFor(width: double.infinity)', BoxConstraints.tightFor(width: double.infinity)),
                      _button('tightFor(height: double.infinity)', BoxConstraints.tightFor(height: double.infinity)),
                    ])
            ),
          )
        ],
      ),
    );
  }

  Widget _button(String label, BoxConstraints _constraints) {
    bool _active = _constraints == constraints;
    return Padding(
      padding: const EdgeInsets.only(top:8, left: 8),
      child: RaisedButton(
        color: _active ? Colors.cyanAccent : null,
        child: Text(label),
        onPressed: () {
          setState(() => constraints = _constraints);
        },
      ),
    );
  }
}

我使用这个解决方案,你必须定义你的屏幕的高度和宽度使用MediaQuery:

 Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width
  )

为了获得match_parent和wrap_content的行为,我们需要 在行/列小部件中使用mainAxisSize属性,即mainAxisSize 属性取MainAxisSize枚举,有两个值,即 MainAxisSize。min,表现为wrap_content和mainaxisize .max 它的行为类似于match_parent。

原文链接