flutter - Center row child and right-align
问题描述
I'm trying to achieve the following layout. This is the top cell if a list.
Right now I managed to do get the following result, with the following code
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,
),
),
],
),
As you may have noticed, the "PLAY QUEUE" is off-center, which is normal because its being centered with what space is left, and "CLEAR" is taking that space.
So centering it is just a matter of removing the CLEAR label from that layout, but if I do, how do I display it?
Looking at the documentation, I should be pretty close to the solution. But they're not centering the Title row (step 1, look at the red squares on the Title Section), so it's not exactly the same, obviously.
I'm not sure what layout I should aim for right now. Is it possible to overlap widgets ? So I can just plain center and full expand the PLAY QUEUE, and just overlap on the right side with the clear button.
Note : I do not want to write an arbitrary left padding on the play queue label.
EDIT : Thanks to the help I've got from the answers, I now have the correct result using the following code :
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"),
),
],
),
What troubles me is the fact I couldn't align vertically, I manually wrote the arbitrary offsets, which I think is not the correct way.
And for some reason I can't just put a Center() or something like that. Is this how it should be done or is this improvable?
EDIT 2 :
I'm now using alignment: FractionalOffset.center,
on the Stack()
class, which aligns vertically, exactly like I wanted.
So now all is well and I'm happy ! Thanks everyone :)
解决方案
这是一个堆栈的工作!
您可以将 Text 小部件作为单独的子元素放入 Stack 中,并使用Positioned小部件右对齐“清除”小部件。
这就是 Material AppBar 小部件为这个确切的场景所做的。
推荐阅读
- swift - 如何在Firebase / Swift中更新字段等于的文档字段
- powershell - PowerShell:Visual Studio Code - 不反映模块中的更改
- serverless-framework - 使用无服务器离线在本地捕获 Dynamo 流事件
- python - Python中的可变宽度负向后看
- .htaccess - 使用 .htaccess 将特定 URL 重定向到 404
- python - psycopg2 / python中的动态“CREATE TABLE”语句
- css - react-native flatList,在每个元素之间留出负空间
- html - 使用 CSS 网格显示当列少于预期时填充剩余宽度
- python - 如何覆盖 Django 中每个测试文件的设置?
- reactjs - 如何检测鼠标单击是长还是短?