颤振堆栈小部件位置在其他屏幕尺寸上相同答案

【问题标题】：flutter stack widget position same across other screen sizes颤振堆栈小部件位置在其他屏幕尺寸上相同
【发布时间】：2021-05-10 10:43:45
【问题描述】：

我正在尝试开发图像编辑器。它接受用户的输入并将其显示在屏幕上。我附上了几张截图。我已经使用堆栈和定位小部件来实现这一点。而且我也尝试过flutter_screen_util。但是随着屏幕的不同，位置小部件正在改变它的位置。我已经在 2400x1080 分辨率上开发了这个应用程序，并且我已经相应地更改了堆栈小部件的位置。我希望通用代码也可以在不同的屏幕上工作。

     Positioned(
         left: 94,
         bottom: 148,
       
        child: Text(
          widget.score.isEmpty || widget.score == null
              ? ''
              : score, //score gets updated from TextEditingController()
          style:  defaultTextStyle,
        ),
      ).

图片： working fine on 2400x1080 this is on different screen

【问题讨论】：

这里的堆栈不是正确的小部件。尝试使用 Row 或 Wrap。

标签： flutter

【解决方案1】：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: X(),
      ),
    );
  }
}

class X extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: [
        Text("for scoring "),
        _underlineWidget(context, "96"),
        Text(" % in class "),
        _underlineWidget(context, "10"),
        Text(" of year in "),
        _underlineWidget(context, "2020"),
        _underlineWidget(context, " Rotary "),
        Text(" School located in "),
        _underlineWidget(context, "Bengal"),
      ],
    );
  }

  Widget _underlineWidget(context, String text) {
    return Container(
      child: Text(text),
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(width: 2, color: Colors.teal),
        ),
      ),
    );
  }
}

【讨论】：

感谢代码，图片将有固定的图片。只能使用 textEditing 控件填充虚线部分。
如果需要打印成pdf，那么最好使用pub.dev/packages/pdf。这将允许您打印一般颤振小部件。并将使其看起来像一个图像。如果您试图将文本放置在图像之上，那么对于不同的屏幕尺寸来说，这将是一项繁重的工作。

【解决方案2】：

如果您想使用堆栈执行此操作，则切勿使用示例中的原始值，您应该计算屏幕大小然后放置它们：

Positioned(
         left: MediaQuery.of(context).size.width/8, //This will place the widget at a distance of 1/8th of the screen width so just change the ratio and place it.
         bottom: MediaQuery.of(context).size.height/12, //this is for 1/12th of screen height
       
        child: Text(
          widget.score.isEmpty || widget.score == null
              ? ''
              : score, //score gets updated from TextEditingController()
          style:  defaultTextStyle,
        ),
      ).

虽然可能不是在所有情况下都很好，但比你的原始值要好得多

【讨论】：

即使在使用 MediaQuery 之后，小部件也不在正确的位置。有什么方法可以使用图像坐标放置小部件
对不起，我不知道 :(

【解决方案3】：

用Container() 包裹你的堆栈，然后给它想要的width。

【讨论】：