颤振图标如何填充选项卡中可用的所有宽度和高度

Posted 2023-03-28

【中文标题】颤振图标如何填充选项卡中可用的所有宽度和高度

【英文标题】：Flutter icon how to fill all the width and height available in the tab

【发布时间】：2021-09-02 16:38:05

【问题描述】：

我有一张这样的卡片。 Actual card

但我想要一张这样的卡片 What i want

我的代码是：

return Card(
      semanticContainer: true,
      clipBehavior: Clip.antiAliasWithSaveLayer,
      margin: EdgeInsets.fromLTRB(20.0, 5.0, 20.0, 5.0),
      elevation: 5.0,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15),
      ),
      child: Container(
        padding: EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 5.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text('Example text'),
                Text("20-06-2021 - 13:00",
                    style:
                    TextStyle(fontSize: 15, fontStyle: FontStyle.italic)),
                Text("Example text"),
                Text("Example text"),
              ],
            ),
            Column(
              children: <Widget>[
                Flag(
                  'FR',
                  height: 40,
                  width: 40,
                  replacement: Text('Error'),
                ),
              ],
            ),
          ],
        ),
      ),
    );

现在，我有固定的高度和宽度，我无法获得我想要的，因为每次尝试都会放大卡片的高度。（我想保持与上面卡片相同的高度）。图标来自包标志（Flags package）

【参考方案1】：

而不是将Container 包装在Card 中。尝试在Card 中用Expanded 包裹Row。 （我只是把 Container 改成了 padding）

        Card(
            semanticContainer: true,
            clipBehavior: Clip.antiAliasWithSaveLayer,
            margin: EdgeInsets.fromLTRB(20.0, 5.0, 20.0, 5.0),
            elevation: 5.0,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(15),
            ),
            child: Padding(
              padding: EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 5.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Expanded(
                    flex: 1,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text('Example text'),
                        Text("20-06-2021 - 13:00",
                            style: TextStyle(
                                fontSize: 15, fontStyle: FontStyle.italic)),
                        Text("Example text"),
                        Text("Example text"),
                      ],
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child: Container(
                      height: 100,
                      color: Colors.red,
                    ),
                  )
                ],
              ),
            ),
          ),

【参考方案2】：

试试这个 让它适合宽度和高度：

Flag('AD', height: double.infinity, width: double.infinity, fit: BoxFit.fill)

或者这个：

Flag('AD', height: null, width: null, fit: BoxFit.fill)

我建议在行内将此标志设为可扩展小部件

【参考方案3】：

如果您知道它的固定大小，请将您的 Flag 包裹在 SizedBox 中。

SizedBox(
  height: 65,
  width: 140,
  child: Flag(
    'FR',
    replacement: Text('Error'),
    fit: BoxFit.cover,
  ),
)

更多关于 SizedBox Here