Как изменить текст на кнопке в flutter

#flutter #dart

#flutter #dart

Вопрос:

Я создаю кнопку, но хочу, чтобы она меняла текст каждый раз, когда я ее нажимаю (например, вкл. и выкл.).

Это мой класс кнопок.

 class TextSend extends StatelessWidget {
String title;
Function onTap;
TextSend(this.title, this.onTap);

@override
Widget build(BuildContext context) {
  return RaisedButton(
    color: Colors.green,
    disabledColor: Colors.grey,
    textColor: Colors.white,
    disabledTextColor: Colors.black38,
    child: title,
    onPressed: onTap,
  );
}
}
  

Это экземпляр button, где я вызываю его в другом классе:

 TextSend('Button on', Navigator.push(context, MaterialPageRoute(builder: (context) => MQTTView()));),
  

Ответ №1:

  1. Чтобы изменить текст, вам нужно изменить виджет без состояния на виджет с отслеживанием состояния, потому что виджет без состояния предназначен только для статических страниц, которые не меняют содержимое.

  2. после этого, чтобы добавить текст в кнопку, вам нужно указать текстовый виджет в качестве дочернего элемента RaisedButton , а не строку .

  3. чтобы изменить текст, вам нужно вызвать функцию при нажатии кнопки, эта функция изменит переменную title и после этого вызовет функцию «setState», которая отвечает за обновление страницы, чтобы можно было отобразить ваши изменения

вот ваш измененный код, который должен выполнять нужную вам работу. если вы что-то пропустили, просто дайте мне знать. Спасибо

 import 'package:flutter/material.dart';

class TextSend extends StatefulWidget {
String title;
Function onTTap;
TextSend(this.title, this.onTTap);

  @override
  _TextSendState createState() => _TextSendState();
}

class _TextSendState extends State<TextSend> {


@override
Widget build(BuildContext context) {
  return RaisedButton(
    color: Colors.green,
    disabledColor: Colors.grey,
    textColor: Colors.white,
    disabledTextColor: Colors.black38,
    child: Text(widget.title),
    onPressed: changeText, //
  );
}


// method responsible of changing the text

changeText(){
  setState(() {
    widget.title='text changed';
  });
}


}

  

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

1. Спасибо @Khalil LAABOUDI, кажется, это работает, но как я могу использовать эту кнопку в другом классе?

2. Как я могу это вызвать? (если нужно сказать лучше) И это очень любезно, спасибо.

3. Спасибо, я нашел свою проблему!!

Ответ №2:

Вам нужен класс StatefulWidget. В документации Flutter есть действительно хороший учебник, в котором показан пример, похожий на вашу проблему.