将堆叠的宽度固定到第一个孩子的宽度

发布于 2025-01-24 02:18:02 字数 820 浏览 0 评论 0原文

我有一个带有两个孩子的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),
      ],
    )
  ],
)

原文

I got a Stack-Widget with two childs. The first one is an image, the second one is text. I want to place the text on top of the image, hence the Stack. But when the text is quite long, the text overflows on the left and right. I want it to stay on the image. How can I limit the stacks width to the width of the image?

My Code:

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),
      ],
    )
  ],
)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烟沫凡尘 2025-01-31 02:18:02

使用定位

示例

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),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Use Positioned

Example

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),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}