Question

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

目标：在其父项RoundButton的边缘放置一组小部件（Text和widget小部件）

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

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

这是所需的输出：

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

            Row(//parent widget
                      children: <Widget>[
                        Row(//To be moved to the end of the parent
                          children: <Widget>[
                            RoundIconButton(
                                icon: FontAwesomeIcons.minus, onPressed: () {}),
                            Text('$_counter'),
                            RoundIconButton(
                                icon: FontAwesomeIcons.plus, onPressed: () {}),
                          ],
                        ),
                        Text('10000', style: GoogleFonts.cairo(fontSize: 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(),
              ),
            ],
          ),
        ),

已经尝试过的解决方案：

使用多个值更改行mainAxisAlignment，但没有获得所需的输出
将Row放在Flex小部件中

Answer 1

您可以使用Stack将小部件分成多个层，然后使用Position将层精确地放置在所需的位置。

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Material(
        child: Center(
          child: Stack(
            children: <Widget>[
              Container(
                width: 500,
                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'),
                          Text('subtitle'),
                          Text('5000'),
                          Text('10000'),
                        ],
                      ),
                    ),
                    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>[
                    CircleAvatar(
                      backgroundColor: Colors.blue,
                      radius: 20,
                      child: IconButton(
                        padding: EdgeInsets.zero,
                        icon: Icon(Icons.add),
                        color: Colors.white,
                        onPressed: () {},
                      ),
                    ),
                    Text('1'),
                    CircleAvatar(
                      backgroundColor: Colors.blue,
                      radius: 20,
                      child: IconButton(
                        padding: EdgeInsets.zero,
                        icon: Icon(Icons.remove),
                        color: Colors.white,
                        onPressed: () {},
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

希望这会有所帮助。

Answer 2

您可以使用堆栈和定位：

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)),
                      ],
                    ),),
        ]
       ),),),),
    );
  }
}

Answer 3

尝试添加一个Spacer

   Row(//parent widget
                  children: <Widget>[
                    Row(//To be moved to the end of the parent
                      children: <Widget>[
                        RoundIconButton(
                            icon: FontAwesomeIcons.minus, onPressed: () {}),
                        Text('$_counter'),
                        RoundIconButton(
                            icon: FontAwesomeIcons.plus, onPressed: () {}),
                      ],
                    ),
                    Spacer(),//Where I added the spacer
                    Text('10000', style: GoogleFonts.cairo(fontSize: 15)),
                  ],
                ),

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

3 个答案: