Question

我正在尝试构建具有给定宽度和高度的图像网格，将其包装在Containers内，并使用fit: BoxFit.fill以便能够为容器设置外部和内部填充（我不会不在乎保持图像的宽高比，我不会在每个方向上都具有相同的填充，同时要为外部容器保持固定的总宽度和高度。

现在，我需要在每个图像的顶部覆盖另一个小部件（在左上角，因此我需要内部容器为图像设置更多填充），但是当我将内部容器包装在{{ 1}}，外部容器的填充会不受控制地增长，如下所示：

我该如何解决？这是我的代码：

Stack

Answer 1

在Stack小部件内，我们需要提供有关可用空间的其他提示。我将图片与背景分离，并用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);
  }
}

将容器包装在堆栈中时填充错误[颤振]

1 个答案: