扩展小部件中可见溢出

Question

我的布局是一行，包含三个展开的小部件。

我需要在其中一个展开的小部件中显示溢出

这是代码

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(color: Colors.red,)
    ),
    Expanded(
      flex: 2,
      child: Container(color: Colors.green,)
    ),
    Expanded(
      flex: 3,
      child: Container(color: Colors.orange,)
    ),
  ],
),

现在我需要在展开的小部件中添加这样的圆圈，它会溢出展开的小部件。我无法将 Expanded 包装在溢出框中，所以我迷路了

感谢任何帮助。

编辑：我在第三个展开时试过这个，只是想看看它是否会溢出，但它只会溢出 SizedOverflowBox，不会溢出 Expanded

Expanded(
  flex: 3,
  child: SizedOverflowBox(
    size: const Size(100.0, 100.0),
    alignment: AlignmentDirectional.bottomCenter,
    child: Container(height: 50.0, width: 1500.0, color: Colors.blue,),
  ),
),

看来是不可能了

Answer 1

可以通过 Stack 轻松实现。请看下面的代码：

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Row(
          children: [
            Expanded(
                flex: 1,
                child: Container(
                  color: Colors.red,
                )),
            Expanded(
                flex: 2,
                child: Container(
                  color: Colors.green,
                )),
            Expanded(
                flex: 3,
                child: Container(
                  color: Colors.orange,
                )),
          ],
        ),
        Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Container(
                height: 25,
                width: 25,
                decoration:
                    BoxDecoration(color: Colors.black, shape: BoxShape.circle),
                child: Center(
                  child: Container(
                    height: 15,
                    width: 15,
                    decoration: BoxDecoration(
                        color: Colors.white, shape: BoxShape.circle),
                  ),
                ),
              ),
              Container(
                height: 25,
                width: 25,
                decoration:
                    BoxDecoration(color: Colors.black, shape: BoxShape.circle),
                child: Center(
                  child: Container(
                    height: 15,
                    width: 15,
                    decoration: BoxDecoration(
                        color: Colors.white, shape: BoxShape.circle),
                  ),
                ),
              ),
              Container(
                height: 25,
                width: 25,
                decoration:
                    BoxDecoration(color: Colors.black, shape: BoxShape.circle),
                child: Center(
                  child: Container(
                    height: 15,
                    width: 15,
                    decoration: BoxDecoration(
                        color: Colors.white, shape: BoxShape.circle),
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

请查看文本项目符号点溢出的代码。

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(),
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          flex: 1,
          child: Container(
            color: Colors.red.withAlpha(60),
            child: OverflowBox(
              alignment: Alignment.topLeft,
              maxWidth: 400,
              child: SizedBox(
                width: 300,
                child: Text(
                  'HelloHello ?',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
        ),
        Expanded(
          flex: 2,
          child: Container(
            color: Colors.green.withAlpha(60),
            child: OverflowBox(
              alignment: Alignment.topLeft,
              maxWidth: 400,
              child: SizedBox(
                width: 300,
                child: Container(
                  child: Text(
                    '\n\nHelloHello HelloHello ?\n\nHelloHello HelloHello ?\n\nHelloHello HelloHello ?\n\nHelloHello HelloHello ?',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
            ),
          ),
        ),
        Expanded(
          flex: 3,
          child: Container(
            color: Colors.purple.withAlpha(60),
            child: OverflowBox(
              alignment: Alignment.topLeft,
              maxWidth: 400,
              child: SizedBox(
                width: 300,
                child: Text(
                  '\n\n\n\n\n\n\n\n\n\n\n\Hello Hello Hello Hello Hello Hello ',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}