как изменять текст с помощью onPressed

Question

0) вопрос Как получить доступ к виджету, что бы изменить в нем текст, например аналог идентификатора или ключ?

1) вопрос Как правильно использовать событие onPressed ?

onPressed: () => {
 f1()
}

или присваиваем ему ссылку на метод

onPressed: f1

или в самом событии пишем код

onPressed: () => {
 switch(b) {
   case true:
    str = 'True';
    b = false;
    break;
   case false:
    str = 'False';
    b = true;
    break;
  }
}

2) вопрос не получается изменять текст при нажатии на кнопку.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
 String str = 'Yes';
 bool b = false;

 //метод должен меняет текст
 void f1() {
  switch(b) {
   case true:
    str = 'True';
    b = false;
    break;
   case false:
    str = 'False';
    b = true;
    break;
  }
 }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
     debugShowCheckedModeBanner: false,
     home: Scaffold(
      appBar: AppBar(),
      body: Container(
       child: Row(
        children: <Widget>[
         CupertinoButton(
          onPressed: () => {
           f1()
          },
          //onPressed: f1,
          color: Colors.orange,
          borderRadius: BorderRadius.circular(30.0),
          child: Text(
           'Ok',
           textAlign: TextAlign.center,
           style: TextStyle(color: Colors.white),
          ),
         ),
         Text(
          //здесь должен меняться текст после нажатия кнопки
          str,
         )
        ],
       ),
      ),
     ),
    );
  }
}

Только изучаю Flutter, пытаюсь разобраться. Спасибо.

Answer 1

Чтобы ответить на ваш вопрос, необходимо узнать что такое StatelessWidget и StatefulWidget (и какая между ними разница).

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

StatefulWidget – рекомендуется для изменяемых виджетов, с изменяемым внутренним состоянием.

Исходя из этого мы понимаем: чтобы изменить данные внутри StatelessWidget, необходимо создать конструктор этого класса с необходимыми для нас полями. Пример:

class MyWidget extends StatelessWidget {
  final text;
  MyWidget(this.text);

  @override
  Widget build(BuildContext context) {
    return Text(text);
  }
}

При вызове MyWidget("...") текст будет меняться. Но если вам необходимо изменять ваши данные без ручного участия (с использованием внутреннего состояния), например при нажатии на кнопку, то следует использовать StatefulWidget. Для примера возьмём ваш код:

class MyWidget extends StatefulWidget {
  @override
  createState() => new MyWidgetState();
}

class MyWidgetState extends State<MyWidget> {
  String str;
  bool b;

  // Вызывается один раз при инициализации виджета
  @override
  initState() {
    super.initState();
    str = 'Yes';
    b = false;
  }

  void f1() {
    switch (b) {
      case true:
        str = 'True';
        b = false;
        break;
      case false:
        str = 'False';
        b = true;
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(),
        body: Container(
          child: Row(
            children: <Widget>[
              RaisedButton(
                // setState() обозначает что наше состояние изменилось => необходимо
                // перестроить виджет для отображения новых данных.
                onPressed: () => {setState(() => f1())},
                color: Colors.orange,
                child: Text(
                  'Ok',
                  textAlign: TextAlign.center,
                  style: TextStyle(color: Colors.white),
                ),
              ),
              Text(str),
            ],
          ),
        ),
      ),
    );
  }
}

Напоследок соединим два примера в один:

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: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

// 1 пример
class MyText extends StatelessWidget {
  final text;
  MyText(this.text);

  @override
  Widget build(BuildContext context) {
    return Text(text);
  }
}

class MyWidget extends StatefulWidget {
  @override
  createState() => new MyWidgetState();
}

// 2 пример
class MyWidgetState extends State<MyWidget> {
  String str;
  bool b;

  // Вызывается один раз при инициализации виджета
  @override
  initState() {
    super.initState();
    str = 'Yes';
    b = false;
  }

  void f1() {
    switch (b) {
      case true:
        str = 'True';
        b = false;
        break;
      case false:
        str = 'False';
        b = true;
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(),
        body: Container(
          child: Row(
            children: <Widget>[
              RaisedButton(
                // setState() обозначает что наше состояние изменилось => необходимо
                // перестроить виджет для отображения новых данных.
                onPressed: () => {setState(() => f1())},
                color: Colors.orange,
                child: Text(
                  'Ok',
                  textAlign: TextAlign.center,
                  style: TextStyle(color: Colors.white),
                ),
              ),
              // Вызов 1 примера
              MyText(str),
            ],
          ),
        ),
      ),
    );
  }
}

Ответ на 0 вопрос:

void main() {
  Person p1 = new Person();
  p1.age = 1;
  print(p1.age);
}

class Person {
  String name;
  int age;
  Person({this.name, this.age});
}

Ответ на 1 вопрос: обычно используют либо 1 либо 3 вариант, выбор между ними: от количества кода (если 1-2 строчки можно и 3 вариант выбрать. Если больше, то 1).

Если у Вас остались вопросы, я с удовольствием на них отвечу.

БЛОГ НА HUSL

как изменять текст с помощью onPressed

Ответы (1 шт):