Question

我正在尝试开发图像编辑器。它接受用户的输入并将其显示在屏幕上。我附上了一些截图。我使用堆栈和定位小部件来实现这一点。我也尝试过 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

Answer 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),
        ),
      ),
    );
  }
}

Answer 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,
        ),
      ).

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

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

2 个答案: