有沒有辦法將小部件與 Flutter 中一行的最右側對齊？

Question

我在 Flutter 中有一個帶有兩個小部件的行。 我試圖讓第一個小部件居中在屏幕中間，第二個小部件被強制放在屏幕的最右邊。

我試過使用 Spacer()。 這會導致應用程序返回一個空白屏幕。

我也嘗試過使用擴展。 這會將第二個小部件完全從屏幕上發送出去。

嘗試 mainAxisAlignment: MainAxisAlignment.spaceBetween 似乎沒有任何效果。

@override
  Widget build(BuildContext context) {
    return new Container(
      height: MediaQuery.of(context).size.height,
      child: SingleChildScrollView(
        child: new Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            new Container(
              child: new GestureDetector(
                onTap: () {
                  FocusScope.of(context).requestFocus(new FocusNode());
                },
                child: Column(
                  children: <Widget>[
                    SizedBox(height: 40.0),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        new Column(
                          children: <Widget>[
                            new Container(
                              child: Row(
                                mainAxisAlignment:MainAxisAlignment.spaceBetween,
                                children: <Widget>[
                                  Container(),
                                  Container(
                                    child: Text(
                                      'Profile',
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                        fontFamily: 'Lato',
                                        color: Colors.white,
                                        fontSize: 50.0,
                                        fontWeight: FontWeight.w700,
                                      ),
                                    ),
                                  ),
                                  Container(
                                    child: IconButton(
                                      icon: Icon(
                                        Icons.settings,
                                        color: Colors.white,
                                        size: 30.0,
                                      ),
                                      onPressed: () {
                                        Navigator.push(
                                          context,
                                          MaterialPageRoute(
                                            builder: (context) => OnBoarding()),
                                        );
                                      }),
                                  ),
                                ]),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),

Answer 1

您可以將Row與包含Stack的Expanded子項一起使用。 使用 Center 將文本Center並使用Positioned圖標，如下所示：

[...]
child: Column(
  children: <Widget>[
    SizedBox(height: 40.0),
    Row(
      children: <Widget>[
        Expanded(
          child: Stack(
            children: [
              Center(
                child: Text(...),
                ),
              ),
              Positioned(
                right: 8,
                child: IconButton(...),
[...]

Answer 2

我這樣做並在我的項目中工作

child:Row(
 **crossAxisAlignment: CrossAxisAlignment.center,
 mainAxisAlignment: MainAxisAlignment.end,**
 children: [
  Icon(MaterialCommunityIcons.comment_outline),
  Text("0"),
  Icon(Icons.favorite_border),
  Text("0"),
  ],
),

我需要在行小部件的右側對齊圖標和文本

Container(
  child: Row(
   crossAxisAlignment: CrossAxisAlignment.center,
   mainAxisAlignment: MainAxisAlignment.end
   children: [ // put your widget list and be happy ]
  )
)

在此處輸入圖片說明

Answer 3

使用具有以下結構的行：

Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      Container(),
      Container(
        child: Text(
      'Profile',
      textAlign: TextAlign.center,
      style: TextStyle(
        fontFamily: 'Lato',
        color: Colors.white,
        fontSize: 50.0,
        fontWeight: FontWeight.w700,
        ),
      ),
    ),
    Container(
    child:  IconButton(
      icon: Icon(
        Icons.settings,
        color: Colors.white,
        size: 30.0,
        ),
      ),
    ),  
  ]
),

將會發生的情況是spaceBetween屬性將在行中的小部件之間平均划分可用空間，所以我放了一個空的Container ，這將強制Text小部件位於行的中間，而IconButton位於遠端作為你渴望。

我在您的代碼片段中注意到您有一個Column與一個Row再次包含一個Column ，您應該消除這種冗余以優化您的代碼並使其更易於調試：

Answer 4

只需在正文和最右側的圖標之間添加Spacer()即可。

例如：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    IconButton(
      icon: Icon(Icons.arrow_back),
      onPressed: () {},
    ),
    Text(
      'Random test text',
      style: TextStyle(color: Colors.white),
    ),
    Spacer(),
    IconButton(
      icon: Icon(Icons.more_vert_rounded),
      color: Colors.white,
      onPressed: () {},
    ),
  ],
)

我希望這可以幫助你。 我希望代碼的格式是可讀的。 仍然掌握着 stackoverflow 的評論

Answer 5

您是否嘗試將行的 mainAxisAlignment 設置為 mainAxisAlignment.center？

Answer 6

Imo 最簡單的方法是創建一個有 2 個孩子的行：第一個孩子是一個擴展行，其中包含所有“主要”小部件。 第二個孩子是你的小部件，它必須對齊到最后。

Row(
  children: [
    Expanded(
      child: Row(
        children: [...mainWidgets...],
      ),
    ),
   ...endWidget...
  ],
),

請注意， Expanded 是貪空間的。 如果您使用例如 MainAxisAlignment.center 作為您的擴展行，那么您的孩子將在整個可用寬度上繪制。 如果這不符合您的喜好，我建議將 Expanded- Row （未擴展）包裝在具有“constraints: BoxConstraints(maxWidth: 500)”的容器內。 顯然擴展不應該被約束。

Answer 7

在Row中使用如下所示的Expanded和Align實現：

Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: <Widget>[
    ...some other widgets,
    Expanded(
      //Expanded will help you to cover remaining space of Row
      flex: 1,
      child: Align(
        //Align with alignment.centerRight property will move the child to righteous inside Expanded
        alignment: Alignment.centerRight,
        child: const Icon(Icons.arrow_back),
      ),
    ),
  ],
),

請注意， Expanded必須在Row children: <Widget>[] ，否則假設您已將GestureDetector放在Row children: <Widget>[] ，並且在GestureDetector中放置了Expanded ，那么它將不會不工作。

希望這會幫助很多人。