0

我有CustomPaint一个 1:1 的正方形，我需要把它放在一个Row. 可用的水平和垂直空间可能会有所不同，因此我需要正方形的长度和宽度都是最小的最大约束。

我怎样才能实现这种行为？

我试过用LayoutBuilder这个：

Row(
  children: [
    ...,
    LayoutBuilder(
      builder: (context, constraints) {
        final size = min(constraints.maxWidth, constraints.maxHeight);
        return SizedBox(
          width: size,
          height: Size,
          child: CustomPaint(...),
        ),
      },
    ),
  ]
),

但是，这不起作用，因为Row提供了无限的水平约束 ( maxWidth == double.infinity)。FittedBox由于同样的原因，使用小部件也会失败。

将 包装LayoutBuilder在一个Expanded小部件中为其提供了一个有界的最大宽度，但我需要在它旁边有另一个小部件Row，所以这是不合适的。在这种情况下的Flexible行为也一样。Expanded

4

3 回答 3

0

我最终通过将保持小部件保持在树上的责任来解决这个问题。使用方形小部件的小部件更了解它们正在显示的其他内容，并且更有能力为其提供正确的约束。

于 2020-12-24T10:55:16.127 回答
0

我认为你可以从 AspectRatio 小部件中得到你想要的东西......如果你告诉它 1:1，那么它会尝试制作一个正方形，除非完全不可能。

于 2020-12-24T06:00:01.147 回答
0

请尝试下面的代码，使用 Align 小部件将小部件限制为正方形：

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

final Color darkBlue = const Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          flex: 1,
          child: Container(),
        ),
        Expanded(
          flex: 2,
          child: LayoutBuilder(
            builder: (context, constraints) {
              final size = min(constraints.maxWidth, constraints.maxHeight);
              return Align(
                alignment: Alignment.centerRight,
                child: Container(
                  height: size,
                  width: size,
                  color: Colors.amber,
                ),
              );
            },
          ),
        ),
        // Expanded(
        //   flex: 1,
        //   child: Container(),
        // ),
      ],
    );
  }
}
于 2020-12-24T06:00:04.903 回答