在flutter中等同于wrap_content和match_parent ?

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

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

当前回答

你可以用小伎俩: 假设你有以下要求: (宽、高)

Wrap_content,Wrap_content:

 //use this as child
 Wrap(
  children: <Widget>[*your_child*])

Match_parent Match_parent:

 //use this as child
Container(
        height: double.infinity,
    width: double.infinity,child:*your_child*)

Match_parent Wrap_content:

 //use this as child
Row(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[*your_child*],
);

Wrap_content Match_parent:

 //use this as child
Column(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[your_child],
);

2019-05-08 07:12:50

其他回答

使用FractionallySizedBox小部件。

FractionallySizedBox(
  widthFactor: 1.0, // width w.r.t to parent
  heightFactor: 1.0,  // height w.r.t to parent
  child: *Your Child Here*
}

当您希望将子节点的大小调整为其父节点大小的一小部分时，这个小部件也非常有用。

例子: 如果你想让子元素占据父元素50%的宽度，将widthFactor设置为0.5

2020-04-17 04:23:52

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

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.

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

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

2017-02-16 02:57:49

匹配父

为了匹配或填充父对象(高度和宽度)，我们可以在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);
        },
      ),
    );
  }
}

2021-04-02 03:42:58

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

2019-01-08 12:36:51