Блог

Главная - Вопросы по программированию - как выровнять переключатели по левому краю?

как выровнять переключатели по левому краю?

#flutter

#flutter

Вопрос:

У меня есть две кнопки переключения внутри столбца, я бы хотел, чтобы вторая кнопка переключения выровнялась по левому краю с первыми кнопками переключения, это работает, если все кнопки имеют одинаковый размер текста, вот код, и вы можете видеть изображение, на котором вторая кнопка переключения имеет больше пробелов слева, есть идеи, какрешить эту проблему? вот код:

 import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: SampleStateless());
  }
}

class SampleStateless extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('sample')),
      body: mybody(),
    );
  }

  Widget mybody() {
    return Column(
      children: [
        SizedBox(
          height: 20,
        ),
        Padding(
          padding: const EdgeInsets.only(bottom: 8.0),
          child: Text("Unicode Character Set:"),
        ),
        Padding(
          padding: const EdgeInsets.only(left: 20.0),
          child: ToggleButtons(
            isSelected: [false, true],
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(' Sample 1 '),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(' Sample 2'),
              )
            ],
          ),
        ),
        SizedBox(
          height: 20,
        ),
        Padding(
          padding: const EdgeInsets.only(bottom: 8.0),
          child: Text("Show ABCD Wrting As ::"),
        ),
        Padding(
          padding: const EdgeInsets.only(left: 20.0),
          child: ToggleButtons(
            isSelected: [false, true],
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(' Sample 1 '),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(' ABC '),
              )
            ],
          ),
        ),
      ],
    );
  }
}

введите описание изображения здесь

Комментарии:

1. ` mainAxisAlignment: MainAxisAlignment.start`, используйте это в столбце, будет перемещать всех дочерних элементов влево

2. спасибо за быстрый ответ, я добавил mainAxisALignment, кажется, он все еще не выровнен должным образом, вот обновленная суть: gist.github.com/sqllyw/863b30edd7bc28decaaf9ac210fc2d1c

3. я запускаю ваш виджет. вы хотите, чтобы они были равны по ширине, верно?

4. я хочу, чтобы кнопка ‘sample1’ во второй строке была выровнена по левому краю с ‘sample1’ в первой, вот неправильное изображение: gist.github.com/sqllyw /…

5. вы помещаете первую кнопку переключения внутри дополнения, padding: const EdgeInsets.only(left: 20.0), но не вторую

Ответ №1:

Я протестировал ваш код и установил crossAxisAlignment значение столбца CrossAxisAlignment.start . затем я добавил левое заполнение для заголовков, чтобы выровнять по левому краю виджеты кнопок переключения, как показано ниже:

 class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  int _currentIndex;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('sample')),
      body: mybody(),
    );
  }

  Widget mybody() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SizedBox(
          height: 20,
        ),
        Padding(
          padding: const EdgeInsets.only(bottom: 8.0, left: 20.0),
          child: Text("Unicode Character Set:"),
        ),
        Padding(
          padding: const EdgeInsets.only(left: 20.0),
          child: ToggleButtons(
            isSelected: [false, true],
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(' Sample 1 '),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(' Sample 2'),
              )
            ],
          ),
        ),
        SizedBox(
          height: 20,
        ),
        Padding(
          padding: const EdgeInsets.only(bottom: 8.0, left: 20.0),
          child: Text("Show ABCD Wrting As ::"),
        ),
        Padding(
          padding: const EdgeInsets.only(left: 20.0),
          child: ToggleButtons(
            isSelected: [false, true],
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(' Sample 1 '),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(' ABC '),
              )
            ],
          ),
        ),
      ],
    );
  }
}