將Stack中的寬度固定為第一個孩子的寬度-有解無憂

我有一個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),
      ],
    )
  ],
)

將 Stack 中的寬度固定為第一個孩子的寬度

uj5u.com熱心網友回復：

采用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 中的寬度固定為第一個孩子的寬度

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/465087.html

標籤：扑颤振布局

上一篇：沒有為型別“Type”定義方法“getContacts”

下一篇：如何分隔串列中包含的專案？