Блог

Главная - Вопросы по программированию - Что мне нужно сделать, чтобы связать другой файл с моими виджетами кнопок?

Что мне нужно сделать, чтобы связать другой файл с моими виджетами кнопок?

#flutter #dart #flutter-layout

Вопрос:

Я все еще учусь программировать. Как мне сохранить все мои виджеты кнопок в другом файле и импортировать их в мой основной файл? Вот код:

 class _testState extends State<test> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue[900],
      appBar: AppBar(
        title: Text('test'),
        backgroundColor: Colors.red[900],
      ),
      body: GridView(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
        ),
        children: [
          //buttons
        ],
      ),
    );
  }
}

Как я могу взять приведенный ниже код и поместить его в другой файл, а затем связать его с файлом выше с помощью комментария кнопок?

               Padding(
                padding: const EdgeInsets.fromLTRB(0.0, 9.0, 0.0, 0.0),
                child: TextButton.icon(
                  onPressed: () => {},
                  icon: Column(
                    children: [
                      Icon(
                        Icons.add,
                        color: Colors.white,
                        size: 75,
                      ),
                      Padding(
                        padding: const EdgeInsets.all(10.0),
                        child: Text(
                          'Label',
                          style: TextStyle(
                            color: Colors.white,
                          ),
                        ),
                      ),
                    ],
                  ),
                  label: Text(
                    '', //'Label',
                    style: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                ),
              ),

Ответ №1:

-Сначала создайте новый файл, назовите его jeff.dart .

-Во-вторых, введите это в новый файл: stless . Нажмите Enter, Flutter автоматически создаст StatelessWidget для вас новый. Измените имя класса на JeffButton . Теперь это выглядит так :

 class JeffButton extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
           );
  }
}
  • Скопируйте и вставьте код кнопки , замените Container() .Поздравляем! У тебя была кнопка Джеффа! Теперь вы можете использовать его везде:

класс JeffButton расширяет безгосударственный параметр {

   @override
  Widget build(BuildContext context) {
    return  Padding(
            padding: const EdgeInsets.fromLTRB(0.0, 9.0, 0.0, 0.0),
            child: TextButton.icon(
              onPressed: () => {},
              icon: Column(
                children: [
                  Icon(
                    Icons.add,
                    color: Colors.white,
                    size: 75,
                  ),
                  Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: Text(
                      'Label',
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                  ),
                ],
              ),
              label: Text(
                '', //'Label',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
          );
  }
}

Теперь просто добавьте его туда, где вам это нужно 😉 :

 children: [
          //buttons
JeffButton(),
        ],

Не забудьте импортировать файл jeff.dart туда, где вы его используете, вы можете легко это сделать, переместив курсор, чтобы JeffButton(), показать быстрые исправления, выберите Import: .... (какие варианты являются первыми). Вот как показать быстрые исправления, если вы не знали: https://flutter.dev/docs/development/tools/flutter-fix

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

1. Спасибо, что сработало. Как мне добавить несколько этих кнопок, потому что теперь он возвращает заполнение, обернутое вокруг кнопки, поэтому я не могу добавить несколько. Как бы я добавил несколько

2. Просто удалите виджет заполнения над надписью учебника. виджет значков. А затем добавьте еще одну кнопку в: дети: [ //кнопки Джеффбуттон(), Джеффбуттон(), Джеффбуттон(), ],

3. Спасибо, ты спас меня.

4. Как мне сделать все это еще раз, чтобы у меня было много кнопок в домашней кнопке. файл dart, а затем используйте кнопку home_buttons(), чтобы поместить их все в main.dart

5. Оке, создайте кнопки home_buttons. кнопки dart и Home(виджет без состояния). Замените контейнер на изображение сетки выше. Добавьте столько, сколько вы хотите, к детям:[], . Наконец, вернитесь к виджету testState и замените дочерний элемент: GridView на кнопки «Домой» ().

Метки: ,