Поместите виджеты на край родительского виджета - PullRequest
Новая
       2

Поместите виджеты на край родительского виджета

1 голос
/ 06 мая 2020

РЕДАКТИРОВАТЬ : Добавлен снимок экрана с желаемым результатом

Цель: Размещение группы виджетов (RoundButton s и Text виджеты ) на краю своего родителя widget

Проблема: Виджеты, которые нужно переместить, все еще находятся рядом с их ближайшими виджетами

Вот скриншот показывает проблему:

screenshot describing the problem

Вот желаемый результат:

Desired output

В следующем фрагменте кода показаны виджеты, которые мне нужно переместить в конец родительского элемента: Виджеты, которые необходимо переместить: внутренняя строка и ее виджеты. 

            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(),
              ),
            ],
          ),
        ),

Уже опробованные Решения:

  1. Изменение mainAxisAlignment строки с несколькими значениями, но не t получить желаемый результат
  2. Размещение Row внутри Flex виджета

Ответы [ 3 ]

2 голосов
/ 06 мая 2020

Вы можете разделить виджеты на несколько слоев, используя 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: () {},
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

Надеюсь, это поможет.

1 голос
/ 06 мая 2020

Попробуйте добавить 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)),
                  ],
                ),
1 голос
/ 06 мая 2020

Вы можете использовать Stack and Positioned: 

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

enter image description here

...