flutter 如何在Stack小部件中定位

oxosxuxt 于 2023-05-01 发布在 Flutter

关注(0)|答案(1)|浏览(140)

我有一个Stack小部件和一个Positioned小部件。但它的位置不随Positioned的性质而改变。

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Graphs'),
      ),
      body: Stack(
        children: [
          const Text(
            'test text',
            style: TextStyle(
                fontSize: 20.0,
                fontWeight: FontWeight.w400,
                color: Colors.lightBlue),
          ),
          TextField(
            onChanged: (input) {
              setState(() {
                inEquation = input;
              });
            },
            decoration: const InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'Enter equation',
            ),
          ),
          Positioned(      //the positioned widget I wanna position
            bottom : 50,
            right: 30,
            child: MaterialButton(
              onPressed: () {
                setState(() {
                  toggled = !toggled;
                });
              },
            child: const Text('Enter'),),
          )],
      ),
    );
  }

我觉得它被定位在Stack的children列表中的更大的小部件中。

flutter

来源：https://stackoverflow.com/questions/76123274/how-to-position-inside-a-stack-widget

1条答案

按热度按时间

xwbd5t1u1#

出现问题的原因是Stack小部件没有任何约束。由于没有约束，Positioned（）构件TextButton（）不可见。
为了解决这个问题，使用SizedBox（）或Container（）小部件 Package 您的Stack小部件，并设置其height属性。

body: SizedBox(
        height: MediaQuery.of(context).size.height,
        child: Stack(
          children: [
            const Text(
              'test text',
              style: TextStyle(
                  fontSize: 20.0,
                  fontWeight: FontWeight.w400,
                  color: Colors.lightBlue),
            ),
            TextField(
              onChanged: (input) {
                setState(() {
                  inEquation = input;
                });
              },
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Enter equation',
              ),
            ),
            Positioned(
              //the positioned widget I wanna position
              bottom: 50,
              right: 30,
              child: MaterialButton(
                onPressed: () {
                  setState(() {
                    toggled = !toggled;
                  });
                },
                child: const Text('Enter'),
              ),
            )
          ],
        ),
      ),

赞(0）回复(0）举报 2023-05-01

我来回答

flutter 如何在Stack小部件中定位

1条答案

相关问题

热门标签

最新问答