飞镖中的响应容器圆角

Posted 2023-02-17

【中文标题】飞镖中的响应容器圆角

【英文标题】：Responsive container round corners in dart

【发布时间】：2020-05-25 21:52:54

【问题描述】：

我在想，在 Dart/Flutter 中，你能不能在下一行插入一个半径的响应值而不是这个固定值

topLeft: Radius.circular(20.0)

我希望我能做类似的事情：

topLeft: Radius.circular(SOME SECRET CODE HERE JUST LIKE MEDIAQUERY THING THAT GETS RATIO FROM SCREEN SIZE)

我在

中使用过MediaQuery

 body: Container(
        width: MediaQuery.of(context).size.height * 0.4,
        height: MediaQuery.of(context).size.height * 0.6,
),

它完美地给了我绘制容器相对于屏幕尺寸的这些比率，所以我需要圆角来继承特定的比率，就像宽度和高度一样。

【参考方案1】：

您可以创建一些变量来保存角落的计算值，然后使用 setState 来重建屏幕。因此容器将使用新值重建。

double leftCornerRadius = 0.0;
//calculate the corner and setstate
setState()
  leftCornerRadius = 15.0;

//and on the container user the variable
topLeft: Radius.circular(leftCornerRadius)

因此，每次使用 setState 重新计算半径时，都会更改小部件上的半径。 希望我能帮上忙。

【讨论】：

感谢 Jorge 其实我不知道为什么我需要 setState，只需要像这样定义变量 double leftCornerRadius = MediaQuery.of(context).size.height * 0.5; 然后在像这样的对象中使用它 topLeft: Radius.circular(leftCornerRadius) 它完美地完成了这项工作！

@RagehElAzzazy 嘿，很好用，如果您需要在运行时更改它，您只需要 setState，如果您只需要计算一次，则不需要 setState。 ;)