小编jul*_*les的帖子

当我嵌套两个 SizedBox 时，内框的宽度和高度将被忽略。为什么会这样，我该如何解决它？

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: SizedBox(
      width: 300,
      height: 500,
      child: SizedBox(
          width: 200, height: 200, child: Container(color: Colors.green)),
    ));
  }
}

在此示例中，我有一个 300x500 大小的盒子和一个内部 200x200 大小的盒子。在图中，您可以看到绿色框是外部 SizedBox 的大小，但实际上应该是 200x200 的正方形。

我想一个变量传递给应添加作为一个组件class到div。但是，Vue 添加了名称variable而不是内容。

所以我传递了color包含red.
我想要<div class="red">2</div>
什么：我得到什么：<div class="color">2</div>

我认为这是一个菜鸟问题，很抱歉。也许有更好的方法来做到这一点。

谢谢你的协助。

这是我的组件：

<template>
    <div class="btn btn-outline-primary cell"
         :class="{color}"
         :id="id">
        {{ number }}
    </div>
</template>

<script>
    export default {
        name: "TileElement",
        props: ["id", "number", "color"]
    }
</script>

<style scoped>
    .green {
        color: green;
    }

    .red {
        color: red;
    }

    .yellow {
        color: yellow;
    }

    .cell {
        display: inline-block;
        float: left;
        margin: 0.1em;
        text-align: center;
        background-color: lightgray;
        width: 2.7em;
        height: 2.7em;
    } …