如何防止 Row 占用所有可用宽度？

Question

我的有一个问题CustomChip：

我需要将卡片包裹起来以仅容纳内容。

然而，我有第二个要求：长文本应该溢出淡入淡出。

Expanded当我解决第二个问题时，当我添加包裹内部时，这个问题开始发生Row

我不明白为什么内部Row似乎也在扩展，尽管它mainAxisSize已经设置为min

这是代码：

屏幕：

import 'package:flutter/material.dart';
import 'package:app/common/custom_chip.dart';

class RowInsideExpanded extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(
              width: 1.0,
            ),
          ),
          width: 200.0,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              _buildChip('short'),
              _buildChip('looooooooooooooooooooooongg'),
            ],
          ),
        ),
      ),
    );
  }

  _buildChip(String s) {
    return Row(
      children: [
        Container(
          color: Colors.red,
          width: 15,
          height: 15,
        ),
        Expanded(
          child: CustomChip(
            elevation: 0.0,
            trailing: Container(
              decoration: BoxDecoration(
                color: Colors.grey,
                shape: BoxShape.circle,
              ),
              child: Icon(Icons.close),
            ),
            onTap: () {},
            height: 42.0,
            backgroundColor: Colors.black12,
            title: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 8.0),
              child: Text(
                s,
                softWrap: false,
                overflow: TextOverflow.fade,
                style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 16.0),
              ),
            ),
          ),
        ),
      ],
    );
  }
}

还有CustomChip

import 'package:flutter/material.dart';
class CustomChip extends StatelessWidget {
  final Widget leading;
  final Widget trailing;
  final Widget title;
  final double height;
  final double elevation;
  final Color backgroundColor;
  final VoidCallback onTap;
  const CustomChip({
    Key key,
    this.leading,
    this.trailing,
    this.title,
    this.backgroundColor,
    this.height: 30.0,
    this.elevation = 2.0,
    this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: elevation,
      color: backgroundColor,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(30.0),
      ),
      child: InkWell(
        onTap: onTap,
        child: Container(
          height: height,
          child: Padding(
            padding: const EdgeInsets.only(left: 5.0, right: 5.0),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                leading ?? Container(),
                SizedBox(
                  width: 5.0,
                ),
                Flexible(
                  child: title,
                  fit: FlexFit.loose,
                ),
                SizedBox(
                  width: 5.0,
                ),
                trailing ?? Container(),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

查找“MainAxisSize”属性并设置为“MainAxisSize.min”

Answer 2

而不是Expanded，只需将其替换为 aFlexible那是因为Expanded继承Flexible但将fit属性设置为 FlexFit.tight

当fit是 时， a 的FlexFit.tight任何小部件后代的框约束将获得相同的框约束。这就是为什么即使您已经将其设置为，您仍然会扩展。我更改了您的代码以使用小部件打印框约束。考虑您的扩展代码：FlexFlexibleRowMainAxisSizeminLayoutBuilder

import 'package:flutter/material.dart';

class RowInsideExpanded extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(
              width: 1.0,
            ),
          ),
          width: 200.0,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              _buildChip('short'),
              SizedBox(
                height: 5,
              ),
              _buildChip('looooooooooooooooooooooongg'),
            ],
          ),
        ),
      ),
    );
  }

  _buildChip(String s) {
    return Row(
      children: [
        Container(
          color: Colors.red,
          width: 15,
          height: 15,
        ),
        Expanded(
          child: LayoutBuilder(builder: (BuildContext context, BoxConstraints constraints) {
            print("outter $constraints");

            return Container(
              color: Colors.greenAccent,
              child: LayoutBuilder(builder: (BuildContext context, BoxConstraints constraints) {
                print("inner $constraints");

                return Row(
                  mainAxisSize: MainAxisSize.min, // this is ignored
                  children: <Widget>[
                    SizedBox(
                      width: 5.0,
                    ),
                    Flexible(
                      fit: FlexFit.loose,
                      child: Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 8.0),
                        child: Text(
                          s,
                          softWrap: false,
                          overflow: TextOverflow.fade,
                          style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 16.0),
                        ),
                      ),
                    ),
                    SizedBox(
                      width: 5.0,
                    ),
                    Container(
                      decoration: BoxDecoration(
                        color: Colors.grey,
                        shape: BoxShape.circle,
                      ),
                      child: Icon(Icons.close),
                    ),
                  ],
                );
              }),
            );
          }),
        ),
      ],
    );
  }
}

它打印

I/flutter ( 7075): 外部 BoxConstraints(w=183.0, 0.0<=h<=Infinity) I/flutter ( 7075): 内部 BoxConstraints(w=183.0, 0.0<=h<=Infinity)

（查看 中的宽度w，它限制为183.0外部和内部Row）

现在我将其更改Expanded为Flexible并检查日志：

I/flutter ( 7075): outter BoxConstraints(0.0<=w<=183.0, 0.0<=h<=Infinity)
I/flutter ( 7075): inner BoxConstraints(0.0<=w<=183.0, 0.0<=h<=Infinity)

（查看 中的宽度，对于外部和内部，w它都限制在零和之间）183.0Row

现在你的小部件已经修复了：