Блог

Мне нужно что-то, что может выровнять мои виджеты по левому краю, центру и правому краю в однострочном виджете. Теперь я уже использовал mainAxisAlignment:MainAxisAlignment.spaceBetween, для своего виджета строки. Но здесь, когда у меня есть большой контент для моего левого виджета, он spaceBetween может выровнять мой центральный виджет с правой стороны, что портит дизайн моего приложения.

Есть ли какая-нибудь возможность использовать Align виджет для нескольких виджетов подряд?

 return Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    Container(
      margin: EdgeInsets.only(left: 15.0),
      height: 27.0,
      child: Container(
        child: Center(
          child: Text(
            'TestDataTest',
          ),
        ),
      ),
    ),
    Container(
      height: 27.0,
      child: Container(
        child: Center(
          child: Text(
            'Test',
          ),
        ),
      ),
    ),
    Container(
      margin: EdgeInsets.only(right: 15.0),
      height: 27.0,
      child: Container(
        child: Padding(
          child: Center(
            child: Text(
              'T',
            ),
          ),
        ),
      ),
    ),
  ],
);
 

Здесь изображение вкратце опишет проблему. Приведенная выше строка содержит указанный код, а следующая строка соответствует ожидаемому результату.
Есть ли какое-либо решение, которое может правильно выровнять виджеты по левому краю, центру и правому краю, несмотря на их содержимое?

вы можете использовать структуру виджета следующим образом

 import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Container(
          alignment: Alignment.center,
          margin: EdgeInsets.all(24),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Row1(),
              Row2(),
            ],
          ),
        ),
      ),
    );
  }
}

class Row1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(8),
      color: Colors.orange,
      height: 48,
      child: Row(
        children: <Widget>[
          Expanded(
            child: Align(
              alignment: Alignment.centerLeft,
              child: Container(
                color: Colors.white,
                child: Text('TestDataTest'),
              ),
            ),
          ),
          Expanded(
            child: Align(
              alignment: Alignment.center,
              child: Container(
                color: Colors.white,
                child: Text('Test'),
              ),
            ),
          ),
          Expanded(
            child: Align(
              alignment: Alignment.centerRight,
              child: Container(
                color: Colors.white,
                child: Text('T'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
class Row2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(8),
      color: Colors.orange,
      height: 48,
      child: Row(
        children: <Widget>[
          Expanded(
            child: Align(
              alignment: Alignment.centerLeft,
              child: Container(
                color: Colors.white,
                child: Text('LIVE'),
              ),
            ),
          ),
          Expanded(
            child: Align(
              alignment: Alignment.center,
              child: Container(
                color: Colors.white,
                child: Text('LIVE'),
              ),
            ),
          ),
          Expanded(
            child: Align(
              alignment: Alignment.centerRight,
              child: Container(
                color: Colors.white,
                child: Text('$ 80'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
 

Это самый простой способ, который я нашел для этого, и он очень хорошо адаптируется к содержимому, которое вы помещаете внутрь

 Container(
   margin: EdgeInsets.symmetric(horizontal: 20),
      child: Row(
          children: [
             Text(
               'Left'
             ),
             Spacer(),
             Text(
               'Center'
             ),
             Spacer(),
             Text(
               'Right'
             ),
           ],
         ),
      ),
 

Если вы хотите, чтобы левый и правый края были ближе к краям, вам просто нужно изменить границы контейнера.

Один из способов — настроить ширину отдельных контейнеров. Это может сработать. Когда вы указываете MainAxisAlignment.spaceBetween, выполняется автоматическая настройка на основе доступного пространства и количества виджетов.