Flutter容器内元素的相对位置

Question

11 浏览2023年1月7日

匿名的 2023年1月8日

0 Comments

我有以下稍作修改的标准应用程序，在其中将按钮和结果放置在一个容器中。

首先，我想要获取屏幕的宽度和高度，以设置容器小部件相对于屏幕的位置。

其次，我想要修改按钮在容器小部件中的位置，即通过获取容器的绝对位置来设置按钮相对于屏幕尺寸的绝对位置，或者在容器内部设置按钮的相对位置。

以下是示例代码：

import 'package:flutter/material.dart';


void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: ContainerWidget(),
      ),
    );
  }
}
class ContainerWidget extends StatefulWidget {
  @override
  _ContainerWidgetState createState() => _ContainerWidgetState();
}
class _ContainerWidgetState extends State {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      height: 300,
      width: 300,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            'You have pushed the button this many times:',
          ),
          Text(
            '$_counter',
            style: Theme.of(context).textTheme.headline4,
          ),
          FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
        ],
      ),
    );
  }
}

第一步，我想要获取屏幕的宽度和高度，以设置容器小部件在屏幕中的相对位置。

第二步，我想要修改按钮在容器小部件中的位置，即通过获取容器的绝对位置来设置按钮相对于屏幕尺寸的绝对位置，或者在容器内部设置按钮的相对位置。

以下是示例代码：

Positioned(


  left: 30.0,
  top: 50.0,
  child: Container(
    width: 100.0,
    height: 80.0,
    decoration: BoxDecoration(color: Colors.red),
    child: ...

0

1 答案

匿名的 · Answer 1 · 2023-04-04T07:32:41+00:00

在Flutter中，如果想要相对于父容器移动按钮的位置，可以使用Stack小部件来包装容器，并将容器和按钮设置为其子部件（这意味着必须将按钮移出容器），然后简单地使用Positioned小部件来包装按钮，并使用参数right：，left：，top：，bottom：来控制按钮相对于容器的位置。

解决方法示例代码如下：

//例如，这意味着容器距离左侧30px，距离顶部50px


Positioned(left: 30.0,
           top: 50.0,
           child: Container()),

在Flutter中，使用Stack和Positioned小部件的组合可以轻松实现相对定位。这种方法允许我们根据需要自由调整按钮相对于容器的位置。