flutter - 如何在 Column 中对齐 Widget?
问题描述
我想将我的按钮向右对齐。现在,我正在使用在下面的示例中mainAxisAlignment
设置为MainAxisAlignment.end
like 的 Row 来完成它。然而,这似乎不是一个好方法,因为它有很多代码,我不认为这是这样做的方式。
我已经尝试过这个Align
小部件,但这不起作用。我猜是因为它没有扩展内部小部件,因此Alignment.centerRight
什么也不做。
我现在使用的代码:
new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
new FlatButton(
onPressed: _navigateToPreparationStepsWidgetClicked,
child: new Row(
children: <Widget>[
new Text(
'View Preparation Steps'.toUpperCase(),
style: new TextStyle(
fontWeight: FontWeight.bold),
),
new Icon(Icons.keyboard_arrow_right)
],
))
],
)
Button
在例如 a中对齐例如 a 的正确方法是Column
什么?
解决方案
仔细观察,这是因为您的按钮中有一行。默认情况下,一行会展开以占用尽可能多的空间。因此,当您将按钮向右对齐时,它正在执行此操作,但按钮本身占据了整行。如果你改变颜色,你会更容易看到。简单的答案是在按钮的行上将 mainAxisSize 设置为 MainAxisSize.min。
这对我来说就像预期的那样工作:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(),
body: Column(
children: <Widget>[
FlatButton(child: Text("Default"), color: Colors.blue, onPressed: () {}),
Align(
child: FlatButton(child: Text("Left"), color: Colors.red, onPressed: () {}),
alignment: Alignment.centerLeft,
),
Center(child: FlatButton(child: Text("Centered"), color: Colors.orange, onPressed: () {})),
Align(
child: FlatButton(child: Text("Right"), color: Colors.green, onPressed: () {}),
alignment: Alignment.centerRight,
),
Align(
child: new FlatButton(
onPressed: () {},
child: new Row(
children: <Widget>[
new Text(
'View Preparation Steps'.toUpperCase(),
style: new TextStyle(fontWeight: FontWeight.bold),
),
new Icon(Icons.keyboard_arrow_right)
],
mainAxisSize: MainAxisSize.min,
),
),
alignment: Alignment.centerRight,
),
],
),
),
);
}
}
结果是:
推荐阅读
- excel - 按大纲级别为 Excel 行着色
- javascript - 带有 RTCConfiguration 的 RTCPeerConnection 在 Firefox 上中断
- javascript - 使用 javascript 向选择菜单添加选项时出错
- excel - 将 Excel 365 专业增强版中新/现有工作簿的默认数字格式配置为 0 位小数?
- github - 在 cygwin 上构建 julia,如何获得稳定版本?
- sql - 根据条件SQL执行每行求和
- sql - 两个“可互换”属性的 SQL 唯一约束
- excel - Excel VBA:循环将字符串剪切并粘贴到新行中
- python - 安装 Keras 后 Anaconda 提示卡住/关闭
- flutter - 如何在 Flutter 中创建 45 度的线性渐变?