Question

我正在尝试实现以下布局。这是列表中的顶部单元格。

现在，我设法通过以下代码获得了以下结果

          Row(
        children: <Widget>[
          Expanded(
            child:
          Center(
            heightFactor: 3.5,
            child:
            Text("PLAY QUEUE",
            ),
          ),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(0,0,15.0,0),
            child:
            Align(
              child:
              Text("CLEAR"),
              alignment: Alignment.centerRight,
            ),
          ),

        ],
      ),

您可能已经注意到，“ PLAY QUEUE”不在中心，这是正常的，因为它以剩余的空间为中心，而“ CLEAR”正在占用该空间。

因此居中只是从该布局中删除CLEAR标签的问题，但是如果这样做，如何显示它？

看着documentation，我应该很接近解决方案。但是他们没有将“标题”行居中（步骤1，请查看“标题”部分的红色方块），因此显然并不完全相同。

我不确定我现在应该瞄准什么布局。是否可以重叠小部件？因此，我可以简单地居中并完全展开“播放队列”，然后在右侧与“清除”按钮重叠。

注意：我不想在播放队列标签上写一个任意的左填充。

编辑：多亏了我从答案中获得的帮助，现在我可以使用以下代码获得正确的结果：

      Stack(
        fit: StackFit.passthrough,
        children: <Widget>[
          Center(
            heightFactor: 3.5,
            child:
            Text(title,
              style: Theme.of(context).textTheme.title.copyWith(color: textColor),
            ),
          ),
          Positioned.directional(
            textDirection: TextDirection.rtl,
            start: 30,
            top: 22,
            child:
              Text("CLEAR"),
            ),
        ],
      ),

困扰我的是我无法垂直对齐，我手动编写了任意偏移量，我认为这不是正确的方法。

由于某种原因，我不能只放置Center（）或类似的东西。这是应该怎么做还是可以改进的？

编辑2：

我现在在alignment: FractionalOffset.center,类上使用Stack()，该类垂直对齐，就像我想要的那样。

所以现在一切都好了，我很高兴！谢谢大家：）

Answer 1

这是Stack的工作！

您可以将Text小部件作为单独的子级放入堆栈中，并使用Positioned小部件将“清除”小部件右对齐。

这就是Material AppBar小部件does for this exact scenario。

Answer 2

您可以使用<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.1.1.RELEASE</version> <relativePath/>  </parent> <groupId>com.myapp</groupId> <artifactId>qrcode-api</artifactId> <version>1.0.0-SNAPSHOT</version> <packaging>jar</packaging> <name>qrcode-api</name> <description>QRCode Processing API</description> <properties> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> <dependency> <groupId>org.seleniumhq.selenium</groupId> <artifactId>selenium-java</artifactId> </dependency> <dependency> <groupId>com.github.detro</groupId> <artifactId>ghostdriver</artifactId> <version>2.1.0</version> </dependency> </dependencies> <scm> <url>scm:git:https://git.myapp.com:1443/myapp/qrcode-api.git</url> <connection>scm:git:https://git.myapp.com:1443/myapp/qrcode-api.git</connection> <tag>qrcode-1.0.0</tag> </scm> <repositories> <repository> <id>jitpack.io</id> <url>https://jitpack.io</url> </repository> <repository> <id>ext-release-local</id> <url>http://myapp.com:8081/artifactory/ext-release-local</url> <releases> <enabled>true</enabled> </releases> <snapshots> <enabled>false</enabled> </snapshots> </repository> <repository> <id>ext-snapshot-local</id> <url>http://myapp.com:8081/artifactory/ext-snapshot-local</url> <releases> <enabled>false</enabled> </releases> <snapshots> <enabled>true</enabled> </snapshots> </repository> </repositories> <distributionManagement> <repository> <id>ext-release-local</id> <name>ext-release-local</name> <url>http://myapp.com:8081/artifactory/ext-release-local/</url> </repository> <snapshotRepository> <id>ext-snapshot-local</id> <name>ext-snapshot-local</name> <url>http://myapp.com:8081/artifactory/ext-snapshot-local/</url> </snapshotRepository> </distributionManagement> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build>

创建它

Stack

Answer 3

我已使用Row来将Container放在Expanded内的右侧！

一旦我必须在Container内放置一个孩子Row，并且在Row之前，Container已经有其他一些孩子小部件，从默认方向左到右开始和Container恰好落后于较早的孩子。

在这里，我的Container宽度为40.0，而在Row内部的剩余宽度在带孩子之后大约为100.0。

因此，我在下面说了将Container的右侧推到Row。

child: Row(
    children: <Widget>[
      Container(
        padding: EdgeInsets.only(left: 8.0, right: 8.0),
        child: CircleAvatar(
          child: ClipOval(
            child: _musicIcon,
            clipBehavior: Clip.antiAlias,
          ),
        ),
      ),
      Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(top: 8.0, bottom: 3.0),
            constraints: BoxConstraints(maxWidth: 280.0),
            child: Text("some0"),
          ),
          Row(
            children: <Widget>[
              Container(
                constraints: BoxConstraints(maxWidth: 200.0),
                child: Text("some1"),
              ),
              Container(
                padding: EdgeInsets.only(left: 10.0, right: 10.0),
                child: Text("some2"),
              ),
              Container(
                constraints: BoxConstraints(minWidth: 20.0),
                child: Text("some3"),
              ),
            ],
          ),
        ],
      ),
      Expanded(
        child: Container(
            width: 40.0,
            margin: EdgeInsets.only(right: 8.0),
            alignment: Alignment.centerRight,
            child: GestureDetector(
              onTap: () {
                // doing something
              },
              child: Padding(
                padding: EdgeInsets.only(left: 18.0, right: 0.0),
                child: CircleAvatar(
                  child: _getActionFlareActor(
                      _musicURL, _musicTitle, true),
                ),
              ),
            )),
      )
    ],
)),

希望这种情况可能对某人有所帮助。

中间排的孩子和右对齐

3 个答案: