Flutter 将小部件放置在其父小部件的边缘

编辑：添加所需输出的屏幕截图

目标：将一组小部件RoundButtons和文本小部件放置在其父小部件的边缘

问题：需要移动的小部件仍然靠近其附近的小部件

以下是显示问题的屏幕截图：

以下是所需的输出：

以下代码片段显示了我需要移动到父级末尾的小部件： 要移动的小部件：内部行及其小部件

行//父窗口小部件 儿童：[ 要移动到父级末尾的行// 儿童：[ 圆形按钮 图标：FontAwesomeIcons.减号，按下时：{}， 文本“$\u计数器”， 圆形按钮 图标：FontAwesomeIcons.plus，按下时：{}， ], , 文本“10000”，样式：GoogleFonts.cairofontSize:15， ], , 以下是与上述屏幕截图相对应的当前实现：

Container(
          width: deviceWidth,
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              Padding(
                padding: EdgeInsets.only(right: 10),
                child: Column(
                  textDirection: TextDirection.rtl,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Text(
                      'Product',
                      style: GoogleFonts.cairo(
                        fontSize: 15,
                      ),
                    ),
                    Text(
                      'subtitle',
                      style: GoogleFonts.cairo(
                        fontSize: 15,
                        fontWeight: FontWeight.w200,
                      ),
                    ),
                    StrikeThroughWidget(
                      child: Text(
                        '5000',
                        style: GoogleFonts.cairo(
                          fontSize: 10,
                          fontWeight: FontWeight.w200,
                        ),
                      ),
                    ),
                    Row(
                      children: <Widget>[
                        Row(
                          children: <Widget>[
                            RoundIconButton(
                                icon: FontAwesomeIcons.minus, onPressed: () {}),
                            Text('$_counter'),
                            RoundIconButton(
                                icon: FontAwesomeIcons.plus, onPressed: () {}),
                          ],
                        ),
                        Text('10000', style: GoogleFonts.cairo(fontSize: 15)),
                      ],
                    ),
                  ],
                ),
              ),
              Container(
                padding: const EdgeInsets.all(3.0),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    border: Border.all(color: Colors.grey[350])),
                width: 90,
                height: 90,
                child: FlutterLogo(),
              ),
            ],
          ),
        ),

已经尝试过的解决方案：

使用多个值更改行的对齐方式，但未获得所需的输出 将行放置在Flex小部件中

---

您可以使用堆栈并定位：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Material(child: Center(
        child: 
          Container(
          color: Colors.grey,
          width: 400,
          height: 100,
          child: Stack(children: <Widget>[
            Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              Padding(
                padding: EdgeInsets.only(right: 10),
                child: Column(
                  textDirection: TextDirection.rtl,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Text(
                      'Product',
                      style: TextStyle(
                        fontSize: 15,
                      ),
                    ),
                    Text(
                      'subtitle',
                      style: TextStyle(
                        fontSize: 15,
                        fontWeight: FontWeight.w200,
                      ),
                    ),
                    Text(
                        '5000',
                        style: TextStyle(
                          fontSize: 10,
                          fontWeight: FontWeight.w200,
                        ),
                      ),


                  ],
                ),
              ),
              Container(
                padding: const EdgeInsets.all(3.0),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    border: Border.all(color: Colors.grey[350])),
                width: 90,
                height: 90,
                child: FlutterLogo(),
              ),
            ],
          ),

        Positioned(
        bottom: 0,
        left: 0,
        child: Row(
                      children: <Widget>[
                        Row(
                          children: <Widget>[
                            RawMaterialButton(
                                child: Text("-"), onPressed: () {}),
                            Text('6'),
                            RawMaterialButton(
                                child: Text("+"), onPressed: () {}),
                          ],
                        ),
                        Text('10000', style: TextStyle(fontSize: 15)),
                      ],
                    ),),
        ]
       ),),),),
    );
  }
}

---

您可以使用堆栈并定位：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Material(child: Center(
        child: 
          Container(
          color: Colors.grey,
          width: 400,
          height: 100,
          child: Stack(children: <Widget>[
            Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              Padding(
                padding: EdgeInsets.only(right: 10),
                child: Column(
                  textDirection: TextDirection.rtl,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Text(
                      'Product',
                      style: TextStyle(
                        fontSize: 15,
                      ),
                    ),
                    Text(
                      'subtitle',
                      style: TextStyle(
                        fontSize: 15,
                        fontWeight: FontWeight.w200,
                      ),
                    ),
                    Text(
                        '5000',
                        style: TextStyle(
                          fontSize: 10,
                          fontWeight: FontWeight.w200,
                        ),
                      ),


                  ],
                ),
              ),
              Container(
                padding: const EdgeInsets.all(3.0),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    border: Border.all(color: Colors.grey[350])),
                width: 90,
                height: 90,
                child: FlutterLogo(),
              ),
            ],
          ),

        Positioned(
        bottom: 0,
        left: 0,
        child: Row(
                      children: <Widget>[
                        Row(
                          children: <Widget>[
                            RawMaterialButton(
                                child: Text("-"), onPressed: () {}),
                            Text('6'),
                            RawMaterialButton(
                                child: Text("+"), onPressed: () {}),
                          ],
                        ),
                        Text('10000', style: TextStyle(fontSize: 15)),
                      ],
                    ),),
        ]
       ),),),),
    );
  }
}

尝试添加一个间隔

尝试添加一个间隔

---

您可以使用Stack在多个层中分离窗口小部件，并使用Position将这些层精确地放置在您想要的位置

@凌驾 小部件构建上下文上下文{ 返回材料PP 标题：“颤振演示”， debugShowCheckedModeBanner:false， 主题：主题数据 主样本：颜色。蓝色， , 家：材料 儿童：中心 子：堆栈 儿童：[ 容器 宽度：500， 孩子：排 mainAxisSize:mainAxisSize.max， mainAxisAlignment:mainAxisAlignment.end， 儿童：[ 衬料 填充：边缘镶嵌。仅限右：10， 子：列 textDirection:textDirection.rtl， mainAxisAlignment:mainAxisAlignment.spaceBetween， 儿童：[ 文本“产品”， 文本“副标题”， 文本'5000'， 文本'10000'， ], , , 容器 填充：const EdgeInsets.all3.0， 装饰：盒子装饰 borderRadius:borderRadius.circular10， 边框：边框。全色：颜色。灰色[350]， 宽度：90， 身高：90， 孩子：我的标志， , ], , , 定位 底部：0， 左:0,， 孩子：排 儿童：[ 圆形 背景颜色：Colors.blue， 半径：20， 孩子：我的钮扣 填充：EdgeInsets.zero， 图标：IconIcons.add， 颜色：颜色，白色， 按下：{}， , , 文本'1'， 圆形 背景颜色：Colors.blue， 半径：20， 孩子：我的钮扣 填充：EdgeInsets.zero， 图标：IconIcons.remove， 颜色：颜色，白色， 按下：{}， , , ], , ], , , , ;

---

} 您可以使用Stack在多个层中分离窗口小部件，并使用Position将这些层精确地放置在您想要的位置

@凌驾 小部件构建上下文上下文{ 返回材料PP 标题：“颤振演示”， debugShowCheckedModeBanner:false， 主题：主题数据 主样本：颜色。蓝色， , 家：材料 儿童：中心 子：堆栈 儿童：[ 容器 宽度：500， 孩子：排 mainAxisSize:mainAxisSize.max， mainAxisAlignment:mainAxisAlignment.end， 儿童：[ 衬料 填充：边缘镶嵌。仅限右：10， 子：列 textDirection:textDirection.rtl， mainAxisAlignment:mainAxisAlignment.spaceBetween， 儿童：[ 文本“产品”， 文本“副标题”， 文本'5000'， 文本'10000'， ], , , 容器 填充：const EdgeInsets.all3.0， 装饰：盒子装饰 borderRadius:borderRadius.circular10， 边框：边框。全色：颜色。灰色[350]， 宽度：90， 身高：90， 孩子：我的标志， , ], , , 定位 底部：0， 左:0,， 孩子：排 儿童：[ 圆形 背景颜色：Colors.blue， 半径：20， 孩子：我的钮扣 填充：EdgeInsets.zero， 图标：IconIcons.add， 颜色：颜色，白色， 按下：{}， , , 文本'1'， 圆形 背景颜色：Colors.blue， 半径：20， 孩子：我的钮扣 填充：EdgeInsets.zero， 图标：IconIcons.remove， 颜色：颜色，白色， 按下：{}， , , ], , ], , , , ;

---

}谢谢它确实有帮助，结果如下：，我只是更改了字体以保持高度谢谢它确实有帮助，结果如下：，我只是更改了字体以保持高度