1

我的问题与Positioned小部件有关。我想定位与 a 的位置Widget匹配的 s 。上下文是将 PDF 工作表应用到具有/editText 的许多资产的移动设备上。ExactAssetImageContainerRadioButton

事实是，如果我没有为Container包含的图像指定固定的宽度和高度，Positioned Widget则它们的位置将不会相同，但这取决于设备的屏幕尺寸。

这意味着我不能MediaQuery用来强迫我Image填满屏幕。

这是我Container的Image：

class CustomDecoratedBox extends StatelessWidget {
  final Widget widget;
  final double width;
  final double height;
  String asset;

  CustomDecoratedBox({@required this.widget, this.height, this.width,this.asset});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 5.0),
      child: Container(
        width: width,
        height: height,
        decoration: BoxDecoration(
            image: DecorationImage(
              image: ExactAssetImage(
                asset,
              ),
             fit: BoxFit.fill,
              alignment: Alignment.center,
            ),
            border: Border.all(color: Colors.black, width: 1),
            color: Colors.white),
        child: widget,),);}

这是我如何定位孩子的定位小部件（在堆栈中，因为它很多）：

return CustomDecoratedBox(
          width: 360,
          height: 360,
          asset: 'assets/xxx.png',
          widget: Stack(
            children: [
              Positioned(
                bottom: 12,
                left: 16,
                child: CustomTextFieldSetup(
                  width: 50,
                  maxLength: 5,
                  keyboardType: TextInputType.number,
                  textEditingController: _textEditingController,
                ),
              ),

根据您的说法，回答这个用例的最佳方式是什么？

谢谢您的帮助

4

3 回答 3

0

在您的 CustomDecoratedBox 类中，尝试将容器包装在 FittedBox 小部件中。FittedBox 应该在您的屏幕尺寸限制内缩放您的容器，并在此过程中保持您相对于容器尺寸的位置。

于 2020-12-23T06:29:12.347 回答
0

好的，我找到了一种非常好的方法，它适用于 LayoutBuilder 的每种尺寸的屏幕。我所做的是将 2 个 LayoutBuilder 封装在一起。

子节点将基于其父 LayoutBuilder 的约束。但诀窍是你给你的父母的宽度和高度，因为它的装饰中有图像，你应该只使用 maxWidth 或 maxHeight 来提供尺寸，根据你的图像的比例尺寸：

return LayoutBuilder(
      builder: (context, cons) => Center(
        child: Container(
  /// Here you size the container with the width for both height and width of 
  /// the container
          height: cons.maxWidth * 0.8839,
          width: cons.maxWidth,
          decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/xxx.png'),
                fit: BoxFit.fitWidth,
              ),
              border: Border.all(color: Colors.black, width: 1),
              color: Colors.white),
          child: LayoutBuilder(builder: (context, constraints) {
            double diameter = constraints.maxWidth / 28;
            return Center(
              child: Stack(
                children: [
                   Positioned(
                    top: constraints.maxHeight / 3.45,
                    right: constraints.maxWidth / 28,
                    child: //ect...

然后你给你的 Positionned 小部件参数约束值。希望它对你们中的一些人有所帮助

于 2021-01-07T22:52:32.880 回答
0

屏幕强制 与屏幕OverflowBox的大小完全相同，并OverflowBox让其子项Container具有它想要的任何大小。

OverflowBox类似于UnconstrainedBox; 不同之处在于，如果孩子不适合该空间，它将不会显示任何警告。

在这种情况下，Container有 4000 像素的宽度，并且太大而无法放入 中OverflowBox，但OverflowBox只是尽可能多地显示，没有给出警告。

OverflowBox(
  minWidth: 0.0,
  minHeight: 0.0,
  maxWidth: double.infinity,
  maxHeight: double.infinity,
  child: Container(color: red, width: 4000, height: 50),
)
于 2021-12-24T12:48:01.523 回答