Flutter中Stack widget导致父容器拆分问题求助

问题原因 #

Stack组件默认fit属性为StackFit.loose，仅会包裹子组件的最小尺寸，不会自动拉伸填充父容器。你在固定90x90尺寸的Container中使用未设置fit的Stack时，内部的Image.memory只会显示自身原始尺寸，无法填满整个容器。

解决方案 #

给Stack添加fit: StackFit.expand属性，让Stack拉伸至父容器大小，这样内部的Image就能通过BoxFit.cover填满整个容器。

修改后的关键代码片段 #

Container(
  height: 90,
  width: 90,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(10),
  ),
  child: _image != null
      ? Stack(
          fit: StackFit.expand, // 新增该行，让Stack填满父容器
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(10),
              child: Image.memory(
                _image!,
                fit: BoxFit.cover,
              ),
            ),
            Positioned(
                top: 5,
                right: 5,
                child: IconButton(
                    onPressed: () {
                      selectGalleryImage();
                    },
                    icon: Icon(CupertinoIcons.photo)))
          ],
        )
      : IconButton(
          onPressed: () {
            selectGalleryImage();
          },
          icon: const Icon(
            CupertinoIcons.photo,
          )),
),

完整修正代码 #

import 'package:country_state_city_picker/country_state_city_picker.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:multi_vendor_vendor_app/vendor/controllers/vendor_registration.dart';
import 'package:multi_vendor_vendor_app/vendor/views/auth/vendor_auth_screen.dart';

class VendorRegistrationScreen extends StatefulWidget {
  const VendorRegistrationScreen({super.key});

  @override
  State<VendorRegistrationScreen> createState() =>
      _VendorRegistrationScreenState();
}

class _VendorRegistrationScreenState extends State<VendorRegistrationScreen> {
  final FirebaseAuth _firebaseAuth = FirebaseAuth.instance;
  final VendorController _vendorController = VendorController();
  late String countryValue;
  late String stateValue;
  late String cityValue;

  Uint8List? _image;

  selectGalleryImage() async {
    Uint8List im = await _vendorController.pickStoreImage(ImageSource.gallery);

    setState(() {
      _image = im;
    });
  }

  selectCameraImage() async {
    // 修正原代码错误：将ImageSource.gallery改为ImageSource.camera
    Uint8List im = await _vendorController.pickStoreImage(ImageSource.camera);

    setState(() {
      _image = im;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            toolbarHeight: 200,
            flexibleSpace: LayoutBuilder(builder: (context, constraints) {
              return FlexibleSpaceBar(
                background: Container(
                  decoration: BoxDecoration(
                      gradient: LinearGradient(colors: [
                    Colors.blue,
                    Colors.yellow,
                    Colors.yellow.shade900,
                  ])),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Container(
                        height: 90,
                        width: 90,
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(10),
                        ),
                        child: _image != null
                            ? Stack(
                                fit: StackFit.expand,
                                children: [
                                  ClipRRect(
                                    borderRadius: BorderRadius.circular(10),
                                    child: Image.memory(
                                      _image!,
                                      fit: BoxFit.cover,
                                    ),
                                  ),
                                  Positioned(
                                      top: 5,
                                      right: 5,
                                      child: IconButton(
                                          onPressed: () {
                                            selectGalleryImage();
                                          },
                                          icon: Icon(CupertinoIcons.photo)))
                                ],
                              )
                            : IconButton(
                                onPressed: () {
                                  selectGalleryImage();
                                },
                                icon: const Icon(
                                  CupertinoIcons.photo,
                                )),
                      ),
                    ],
                  ),
                ),
              );
            }),
          ),
          SliverToBoxAdapter(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                children: [
                  TextFormField(
                    decoration: InputDecoration(
                      labelText: 'Business Name',
                    ),
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  TextFormField(
                    keyboardType: TextInputType.emailAddress,
                    decoration: InputDecoration(
                      labelText: 'Email Address',
                    ),
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  TextFormField(
                    keyboardType: TextInputType.phone,
                    decoration: InputDecoration(
                      labelText: 'Phone Number',
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: SelectState(
                      onCountryChanged: (value) {
                        setState(() {
                          countryValue = value;
                        });
                      },
                      onStateChanged: (value) {
                        setState(() {
                          stateValue = value;
                        });
                      },
                      onCityChanged: (value) {
                        setState(() {
                          cityValue = value;
                        });
                      },
                    ),
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}

注：已修正原代码中selectCameraImage方法的错误（将ImageSource.gallery改为ImageSource.camera）。

内容的提问来源于stack exchange，提问作者The Synergist