拨开荷叶行,寻梦已然成。仙女莲花里,翩翩白鹭情。
IMG-LOGO
主页 文章列表 对齐属性不起作用,所以我使用空的扩展小部件

对齐属性不起作用,所以我使用空的扩展小部件

白鹭 - 2022-02-02 2183 0 0

我想让文字向右,到目前为止我在做什么

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 评论

发表评论

您的电子邮件地址不会被公开。 必填的字段已做标记 *