Flutter：如何给 Sizedbox 上色（不使用容器）

Question

1.说明

我想更改 'SizedBox' 的全色以查看 'SizedBox' 的位置和范围。我想知道有什么方法可以改变 SizedBox 的颜色而不用 Container 或 Decoration box 填充它。如果没有，我想知道怎么给SizedBox填充装饰框

2。代码

这是我试过的代码。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home : Scaffold(
        appBar: AppBar(
          title : const Text('this is title'),
        ),
        body : const SizedBox(
          width : 200,
          child: DecoratedBox(
              decoration: BoxDecoration(
                color : Colors.red,
              ),
          ),
        ),
        bottomNavigationBar: (
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: const [
              Icon(Icons.favorite),
              Icon(Icons.home),
              Icon(Icons.settings)
            ],
          )
        ),
      ),
    );
  }
}

**3。结果 **

这是我从代码中得到的。

Answer 1

您可以尝试 ColoredBox 小部件

SizedBox(
  width : 200,
  height: 20,
  child: ColoredBox(color: Colors.amber),
),

Answer 2

您可以将 SizedBox 换成 ColoredBox

ColoredBox(
  color: Colors.cyanAccent,
  child: SizedBox(
      width: 200,
      height: 100,),
),

Answer 3

我不确定您为什么要使用它，但您可以让 SizedBox 的子项成为具有您想要的颜色的容器。容器将拉伸至提供的尺寸

SizedBox(
        height: 10,
        width: 30,
        child: Container(color: Colors.red), 
     ),

你也可以使用flutter提供的widget inspector:

https://docs.flutter.dev/development/tools/devtools/inspector#:~:text=The%20Flutter%20widget%20inspector%20is,%2C%20rows%2C%20and%20columns).

Answer 4

如果你想装饰 SizedBox 以查看 Widget 的位置和范围只是为了调试目的，我们可以通过按 [= 启用 debugPaintSizeEnabled 13=] 在 CLI 上启动 flutter run 命令。

否则，使用具有显式大小参数的 Container 与使用 SizedBox 基本相同，并且它允许您使用背景颜色或边框装饰。

另一种选择是使用 ColoredBox 作为 SizedBox 的子项，反之亦然。

Flutter：如何给 Sizedbox 上色（不使用容器）

Flutter : How to color Sizedbox (without using container)

flutter

flutter-layout