将 Stack 中的宽度固定为第一个 child 的宽度

Question

我有一个 Stack-Widget 有两个孩子。第一个是图片，第二个是文字。我想将文本放在图像的顶部，因此 Stack。但是当文字相当长的时候，文字会左右溢出。我希望它留在图像上。如何将堆栈宽度限制为图像的宽度？

我的代码：

Stack(
  alignment: Alignment.bottomCenter,
  children: [
    ExtendedImage.network(
      UserSession().currentImgURL!,
      fit: BoxFit.fitWidth,
      cache: true,
      cacheWidth: 1000,
      enableMemoryCache: false,
      enableLoadState: true,
    ),
    OutlinedText(
      text: Text(title, style: TextStyle(fontSize: kIsWeb ? 5.sp : 18.sp, height: 1.1)),
      strokes: [
        OutlinedTextStroke(color: Colors.black, width: 5),
      ],
    )
  ],
)

Answer 1

使用Positioned

例子

import 'package:flutter/material.dart';

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

void main() {
  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  static MyAppState? of(BuildContext context) =>
      context.findAncestorStateOfType<MyAppState>();

  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  final controller = TextEditingController(text: 'ABC');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Center(
          child: Stack(
//           fit: StackFit.expand,
            children: [
              Image.network(
                'https://i0.wp.com/static1.srcdn.com/wordpress/wp-content/uploads/2021/03/Among-Us-Random-Name-Generator.jpg?w=750&ssl=1',
                fit: BoxFit.cover,
              ),
              Positioned(
                left: 0,
                right: 0,
                bottom: 0,
                child: Text(
                  'bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla',
                  style: TextStyle(color: Colors.white, fontSize: 30),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

将 Stack 中的宽度固定为第一个 child 的宽度

Fix width in Stack to width of first child

flutter

flutter-layout