Positioned 的宽度或 SizedBox 的宽度都不适用于堆栈小部件 Flutter

发布于11月17日

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Title Text'),
      ),
      body: SafeArea(
          child: Stack(children: [
        Column(
          children: const [
            Text('short content'),
          ],
        ),
        const Positioned(
            top: 100,
            width: 320,
            child: SizedBox(
              width: 320,
              height: 50,
              child: ColoredBox(color: Colors.red),
            ))
      ])),
    );

我需要红色的框几乎整个屏幕与，但它流动的文本宽度.我该怎么做呢？

推荐答案

您可以使用Align或Positioned来包装堆栈的all个子对象，以便Stack可以正确地对它们进行布局.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Title Text'),
      ),
      body: SafeArea(
        child: Stack(
          children: [
            /// The column is now positioned.
            Positioned(
              top: .0,
              left: .0,
              child: Column(
                children: const [
                  ColoredBox(color: Colors.amber, child: Text('short content'))
                ],
              ),
            ),
            const Positioned(
              top: 100.0,
              width: 320.0,
              height: 50.0,
              child: ColoredBox(color: Colors.red),
            )
          ],
        ),
      ),
    );
  }

输出: