將容器包裝在堆棧中時填充錯誤 [flutter]

Question

我正在嘗試構建具有給定寬度和高度的圖像網格，將它們包裹在Containers並使用fit: BoxFit.fill能夠為容器設置外部和內部填充（我不在乎保留圖像縱橫比，我不想在每個方向都有相同的填充，同時保持外部容器的固定總寬度和高度）。

現在我需要在每個圖像的頂部覆蓋另一個小部件（在左上角，所以我需要內部容器為圖像設置更多的填充），但是當我將內部容器包裹在Stack ，外部容器padding 不受控制地增長，如下所示：

我該如何解決？ 這是我的代碼：

import 'dart:io';
import 'dart:math';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  // See https://github.com/flutter/flutter/wiki/Desktop-shells#target-platform-override
  debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Row(
          children: [
            Container(
              width: 300,
              height: 200,
              child: Container(
                color: RandomColor().color,
                padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                child: Container(
                  padding: EdgeInsets.fromLTRB(8, 8, 8, 8),
                  color: Colors.white,
                  child: Image.file(
                    File('C:/flutter/test/elephant.jpg'),
                    filterQuality: FilterQuality.high,
                    fit: BoxFit.fill,
                  ),
                ),
              ),
            ),
            Container(
              width: 300,
              height: 200,
              child: Container(
                color: RandomColor().color,
                padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                child: Stack(
                  children: <Widget>[
                    Container(
                      padding: EdgeInsets.fromLTRB(8, 8, 8, 8),
                      color: Colors.white,
                      child: Image.file(
                        File('C:/flutter/test/elephant.jpg'),
                        filterQuality: FilterQuality.high,
                        fit: BoxFit.fill,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class RandomColor {
  Color color;

  RandomColor() {
    final random = Random();
    color = Color.fromRGBO(
        random.nextInt(256), random.nextInt(256), random.nextInt(256), 1);
  }
}

Answer 1

在Stack小部件內部，我們需要對可用空間進行額外提示。 我將圖像與背景分開，並用constraints: BoxConstraints.expand()將其包裹在Container constraints: BoxConstraints.expand()

import 'dart:io';
import 'dart:math';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  // See https://github.com/flutter/flutter/wiki/Desktop-shells#target-platform-override
  debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Row(
          children: [
            Container(
              width: 300,
              height: 200,
              child: Container(
                color: RandomColor().color,
                padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                child: Container(
                  padding: EdgeInsets.fromLTRB(8, 8, 8, 8),
                  color: Colors.white,
                  child: Image.file(
                    File('C:/flutter/test/elephant.jpg'),
                    filterQuality: FilterQuality.high,
                    fit: BoxFit.fill,
                  ),
                ),
              ),
            ),
            Container(
              width: 300,
              height: 200,
              child: Container(
                color: RandomColor().color,
                padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                child: Stack(
                  children: <Widget>[
                    Container(
                        padding: EdgeInsets.fromLTRB(8, 8, 8, 8),
                        color: Colors.white),
                    Padding(
                      padding: EdgeInsets.fromLTRB(8, 8, 8, 8),
                      child: Container(
                        constraints: BoxConstraints.expand(),
                        child: Image.file(
                          File('C:/flutter/test/elephant.jpg'),
                          filterQuality: FilterQuality.high,
                          fit: BoxFit.fill,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class RandomColor {
  Color color;

  RandomColor() {
    final random = Random();
    color = Color.fromRGBO(
        random.nextInt(256), random.nextInt(256), random.nextInt(256), 1);
  }
}