我想让文字向右,到目前为止我在做什么
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _judul = 'Private Chat';
static var _warnaTema = Colors.pink[100];
Widget _dummyExpanded() {
return Expanded(
child: Container(), //contain empty data,
); //just for fill remaining space
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _judul,
theme: ThemeData(
primaryColor: _warnaTema,
),
home: Column(
children: [
Container(
child: Row(
children: [
this._dummyExpanded(),
Text('this is real data 1'),
],
),
),
Container(
child: Row(
children: [
this._dummyExpanded(),
Text('this is real data 2'),
],
),
)
],
),
);
}
}
布局输出是我所期望的(文本在右边),但是有不需要的代码。
正如你所看到的,我使用了不必要的方法_dummyExpanded
来填充可用空间,它只是用空容器扩展。当然,由于有许多嵌套的行和列,这将很难阅读,我如何洗掉不需要的方法而不会丢失我期望的布局输出?
我相信我应该使用对齐方式,但我不知道如何使用
uj5u.com热心网友回复:
方法一。
Container(
child: Row(
mainAxisAlignment:MainAxisAlignment.end,
children: [
Text('this is real data 2'),
],
),
)
方法二。
我更喜欢这种方法,你可以用这种方法换行。您还可以使用Flexible
小部件代替Expanded
Container(
child: Row(
children: [
Expanded(child: Text('this is real data 2', textAlign:TextAlign.end )),
],
),
)
方法三。
如果您只有Text
小部件作为小部件的子Column
部件,那么您可以crossAxisAlignment: CrossAxisAlignment.end,
为您的父Column
小部件设定。
0 评论