Flutter入门问题：变量变化时如何调用setState更新状态？

MediaQuery返回的屏幕宽度变化时，Flutter会自动重建依赖该参数的Widget，但若你需要主动监听并触发setState，可以用以下几种方式实现：

方式1：使用LayoutBuilder（最简洁） #

LayoutBuilder会在父布局约束变化时自动重建，可直接获取当前可用宽度，无需手动监听：

LayoutBuilder(
  builder: (context, constraints) {
    return Container(
      width: constraints.maxWidth - 40,
      child: Text(content,
        overflow: TextOverflow.clip,
        maxLines: 50,
      ),
    );
  },
)

方式2：手动监听MediaQuery变化 #

如果需要在屏幕尺寸变化时执行额外逻辑，可在StatefulWidget的生命周期中注册监听：

class _YourWidgetState extends State<YourWidget> {
  late double _screenWidth;

  @override
  void initState() {
    super.initState();
    _screenWidth = MediaQuery.of(context).size.width;
    MediaQuery.of(context).addListener(_onScreenSizeChanged);
  }

  void _onScreenSizeChanged() {
    setState(() {
      _screenWidth = MediaQuery.of(context).size.width;
    });
  }

  @override
  void dispose() {
    MediaQuery.of(context).removeListener(_onScreenSizeChanged);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: _screenWidth - 40,
      child: Text(content,
        overflow: TextOverflow.clip,
        maxLines: 50,
      ),
    );
  }
}

方式3：使用OrientationBuilder（针对横竖屏切换） #

若只需响应横竖屏切换导致的宽度变化，可使用OrientationBuilder：

OrientationBuilder(
  builder: (context, orientation) {
    final screenWidth = MediaQuery.of(context).size.width;
    return Container(
      width: screenWidth - 40,
      child: Text(content,
        overflow: TextOverflow.clip,
        maxLines: 50,
      ),
    );
  },
)

内容的提问来源于stack exchange，提问作者Hesham Alnahas