flutter - 如何防止 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”