使定位小部件具有响应能力

Question

我想让定位的小部件具有响应能力，但找不到方法。我使用了媒体查询，但没有任何效果。我知道有很多答案，但我没有看到任何人针对定位小部件。每个人都在做行列响应。如果您附上一个带有位置的简单示例，那就太好了。这是我的代码。

\n

  Positioned(\n              top: MediaQuery.of(context).size.width * 0.87,\n              left: MediaQuery.of(context).size.width * 0.02,\n              // width: MediaQuery.of(context).size.width / 30,\n              child: Text(\n                'TRACK\xe2\x80\x99R',\n                style: TextStyle(\n                  fontWeight: FontWeight.w500,\n                  fontSize: MediaQuery.of(context).size.width / 30,\n                ),\n              ),\n            ),\n

\n

Answer 1

这是您Positioned在Stack. 这不是你想要达到的目标吗？

\n

\n

import \'package:flutter/material.dart\';\n\nvoid main() {\n  runApp(\n    MaterialApp(\n      debugShowCheckedModeBanner: false,\n      title: \'Flutter Demo\',\n      home: HomePage(),\n    ),\n  );\n}\n\nclass HomePage extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      body: Stack(\n        children: [\n          Container(color: Colors.blueGrey.shade300),\n          Positioned(\n            top: MediaQuery.of(context).size.width * 0.87,\n            left: MediaQuery.of(context).size.width * 0.02,\n            width: MediaQuery.of(context).size.width / 3,\n            child: ColoredBox(\n              color: Colors.white.withOpacity(.4),\n              child: Text(\n                \'TRACK\xe2\x80\x99R\',\n                style: TextStyle(\n                  fontWeight: FontWeight.w500,\n                  fontSize: MediaQuery.of(context).size.width / 30,\n                ),\n              ),\n            ),\n          ),\n        ],\n      ),\n    );\n  }\n}\n

\n

不过，您可能希望top根据height屏幕的 而不是 来定义您的width。否则，您的文本将在横向模式下超出屏幕：

\n

\n

另一种方法是在你的内部使用Alignand ：FractionallySizedBoxStack

\n

import \'package:flutter/material.dart\';\n\nvoid main() {\n  runApp(\n    MaterialApp(\n      debugShowCheckedModeBanner: false,\n      title: \'Flutter Demo\',\n      home: HomePage(),\n    ),\n  );\n}\n\nclass HomePage extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      body: Stack(\n        children: [\n          Container(color: Colors.blueGrey.shade300),\n          Align(\n            alignment: Alignment(-.9, .9),\n            child: FractionallySizedBox(\n              widthFactor: .3,\n              child: ColoredBox(\n                color: Colors.white.withOpacity(.4),\n                child: Text(\n                  \'TRACK\xe2\x80\x99R\',\n                  style: TextStyle(\n                    fontWeight: FontWeight.w500,\n                    fontSize: MediaQuery.of(context).size.width / 30,\n                  ),\n                ),\n              ),\n            ),\n          ),\n        ],\n      ),\n    );\n  }\n}\n

\n

或者，在您的 中使用 aLayoutBuilder然后使用小部件：PositionedStack

\n

import \'package:flutter/material.dart\';\n\nvoid main() {\n  runApp(\n    MaterialApp(\n      debugShowCheckedModeBanner: false,\n      title: \'Flutter Demo\',\n      home: HomePage(),\n    ),\n  );\n}\n\nclass HomePage extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      body: LayoutBuilder(\n        builder: (_, constraints) {\n          final width = constraints.biggest.width;\n          final height = constraints.biggest.height;\n          return Stack(\n            children: [\n              Container(color: Colors.blueGrey.shade300),\n              Positioned(\n                bottom: height * .05,\n                left: width * .05,\n                width: width / 3,\n                child: ColoredBox(\n                  color: Colors.white.withOpacity(.4),\n                  child: Text(\n                    \'TRACK\xe2\x80\x99R\',\n                    style: TextStyle(\n                      fontWeight: FontWeight.w500,\n                      fontSize: width / 30,\n                    ),\n                  ),\n                ),\n              ),\n            ],\n          );\n        },\n      ),\n    );\n  }\n}\n

\n