容器的边框不统一

Question

即使容器边框的宽度相同，它们看起来也不具有相同的宽度，就像下图一样（在真实设备上测试，型号名称 - Samsung S9）：-

除此之外，不同设备上的边框看起来有所不同，如下图所示（在真实设备上测试，型号名称 - Samsung a31）：-

在上图中，边框看起来也不具有相同的宽度

我使用的代码：-

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Box(),
    );
  }
}

class Box extends StatefulWidget {
  const Box({super.key});

  @override
  State<Box> createState() => _BoxState();
}

class _BoxState extends State<Box> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            height: 80,
            width: 80,
            decoration: BoxDecoration(
                color: Colors.red[100],
                border: const Border(
                  bottom: BorderSide(width: 0.5, color: Colors.black),
                  left: BorderSide(width: 0.5, color: Colors.black),
                  top: BorderSide(width: 0.5, color: Colors.black),
                  right: BorderSide(width: 0.5, color: Colors.black),
                )),
          ),
          Container(
            height: 80,
            width: 80,
            decoration: BoxDecoration(
                color: Colors.green[100],
                border: const Border(
                  bottom: BorderSide(width: 0.5, color: Colors.black),
                  top: BorderSide(width: 0.5, color: Colors.black),
                  right: BorderSide(width: 0.5, color: Colors.black),
                )),
          ),
          Container(
            height: 80,
            width: 80,
            decoration: BoxDecoration(
                color: Colors.orange[100],
                border: const Border(
                  bottom: BorderSide(width: 0.5, color: Colors.black),
                  top: BorderSide(width: 0.5, color: Colors.black),
                  right: BorderSide(width: 0.5, color: Colors.black),
                )),
          ),
        ],
      ),
    ));
  }
}

Answer 1

这是由于屏幕DPI（每英寸点数）的差异导致不同设备的布局存在差异。对于具有相同屏幕高度的 iOS 设备和 Android 设备，它也有所不同。

所以，我基本上使用 flutter 中的 'sizer 包来提高 UI 响应能力。而且，使用起来非常简单。

示例： 对于小部件：

 Container(
  width: 20.w,    //It will take a 20% of screen width
  height:30.h     //It will take a 30% of screen height
)

对于字体：

Text(
  'Sizer',style: TextStyle(fontSize: 15.sp),
);

希望这可以帮助你:)

Answer 2

这是因为所有屏幕上的宽度值并不相同，例如：如果设备宽度为 500 并且容器宽度为 250，则意味着等于屏幕的 50%，但屏幕宽度不同，例如平板电脑是 700 宽度的屏幕那么你的250容器宽度不再是50%， 为了解决这个问题，我希望使用我的包 screentasia 它是处理所有屏幕的最佳 flutter 包。

Answer 3

问题是宽度是小数的。就我个人而言，我不明白为什么它被允许，但我也经历过它经常带来问题。只需将所有宽度定义为

0.5

并将其更改为

1

。无论如何，让某个东西是半个像素没有多大意义

Answer 4

这可能是由于设备像素密度造成的。为了确保跨设备的边框宽度一致，您可以根据设备的像素密度计算像素值。 试试这个：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Box(),
    );
  }
}

class Box extends StatefulWidget {
  const Box({super.key});

  @override
  State<Box> createState() => _BoxState();
}

class _BoxState extends State<Box> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            height: 80,
            width: 80,
            decoration: BoxDecoration(
                color: Colors.red[100],
                border: Border(
                  bottom: BorderSide(
                      width: (0.5 * MediaQuery.of(context).devicePixelRatio),
                      color: Colors.black),
                  left: BorderSide(
                      width: (0.5 * MediaQuery.of(context).devicePixelRatio),
                      color: Colors.black),
                  top: BorderSide(
                      width: (0.5 * MediaQuery.of(context).devicePixelRatio),
                      color: Colors.black),
                  right: BorderSide(
                      width: (0.5 * MediaQuery.of(context).devicePixelRatio),
                      color: Colors.black),
                )),
          ),
          Container(
            height: 80,
            width: 80,
            decoration: BoxDecoration(
                color: Colors.green[100],
                border: Border(
                  bottom: BorderSide(
                      width: (0.5 * MediaQuery.of(context).devicePixelRatio),
                      color: Colors.black),
                  top: BorderSide(
                      width: (0.5 * MediaQuery.of(context).devicePixelRatio),
                      color: Colors.black),
                  right: BorderSide(
                      width: (0.5 * MediaQuery.of(context).devicePixelRatio),
                      color: Colors.black),
                )),
          ),
          Container(
            height: 80,
            width: 80,
            decoration: BoxDecoration(
                color: Colors.orange[100],
                border: Border(
                  bottom: BorderSide(
                      width: (0.5 * MediaQuery.of(context).devicePixelRatio),
                      color: Colors.black),
                  top: BorderSide(
                      width: (0.5 * MediaQuery.of(context).devicePixelRatio),
                      color: Colors.black),
                  right: BorderSide(
                      width: (0.5 * MediaQuery.of(context).devicePixelRatio),
                      color: Colors.black),
                )),
          ),
        ],
      ),
    ));
  }
}

Answer 5

我很确定这是因为您的边框相互接触，所以您有一种错觉，认为它们比应有的更厚。

你能试试这个吗:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Box(),
    );
  }
}

class Box extends StatefulWidget {
  const Box({super.key});

  @override
  State<Box> createState() => _BoxState();
}

class _BoxState extends State<Box> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            height: 80,
            width: 80,
            decoration: BoxDecoration(
                color: Colors.red[100],
                border: const Border(
                  bottom: BorderSide(width: 0.5, color: Colors.black),
                  left: BorderSide(width: 0.5, color: Colors.black),
                  top: BorderSide(width: 0.5, color: Colors.black),
                )),
          ),
          Container(
            height: 80,
            width: 80,
            decoration: BoxDecoration(
                color: Colors.green[100],
                border: const Border(
                  bottom: BorderSide(width: 0.5, color: Colors.black),
                  left: BorderSide(width: 0.5, color: Colors.black),
                  top: BorderSide(width: 0.5, color: Colors.black),
                )),
          ),
          Container(
            height: 80,
            width: 80,
            decoration: BoxDecoration(
                color: Colors.orange[100],
                border: const Border(
                  bottom: BorderSide(width: 0.5, color: Colors.black),
                  left: BorderSide(width: 0.5, color: Colors.black),
                  top: BorderSide(width: 0.5, color: Colors.black),
                  right: BorderSide(width: 0.5, color: Colors.black),
                )),
          ),
        ],
      ),
    ));
  }
}

Answer 6

在 Flutter 中，使用逻辑像素值而不是物理像素。在像素密度较高的屏幕上，1 个逻辑像素的边框可能小于 1 个物理像素 像这样：

double pixelRatio = MediaQuery.of(context).devicePixelRatio;
double borderWidth = 1 * pixelRatio;

你的 _BoxState 类应该像这样

Widget build(BuildContext context) {
double pixelRatio = MediaQuery.of(context).devicePixelRatio;
    double borderWidth = 1 * pixelRatio;
    return Scaffold(
        body: Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            height: 80,
            width: 80,
            decoration: BoxDecoration(
                color: Colors.red[100],
                border: Border(
                  bottom: BorderSide(width: borderWidth, color: Colors.black),
                  left: BorderSide(width: borderWidth, color: Colors.black),
                  top: BorderSide(width: borderWidth, color: Colors.black),
                  right: BorderSide(width: borderWidth, color: Colors.black),
                )),
          ),
          Container(
            height: 80,
            width: 80,
            decoration: BoxDecoration(
                color: Colors.green[100],
                border: Border(
                  bottom: BorderSide(width: borderWidth, color: Colors.black),
                  top: BorderSide(width: borderWidth, color: Colors.black),
                  right: BorderSide(width: borderWidth, color: Colors.black),
                )),
          ),
          Container(
            height: 80,
            width: 80,
            decoration: BoxDecoration(
                color: Colors.orange[100],
                border: Border(
                  bottom: BorderSide(width: borderWidth, color: Colors.black),
                  top: BorderSide(width: borderWidth, color: Colors.black),
                  right: BorderSide(width: borderWidth, color: Colors.black),
                )),
          ),
        ],
      ),
    ));
  }