0

Три виджета Text используют одну переменную str. При нажатии на кнопку рандомным способом выбирается один из виджетов Text и ему присваивается значение, а у других виджетов Text значение остается. Вопрос. Как идентифицировать эти виджеты Text? Возможно ли такое? Например, у JavaScript есть атрибут id.

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

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

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return MaterialApp(
   debugShowCheckedModeBanner: false,
   home: MyHomePage()
  );
 }
}

class MyHomePage extends StatefulWidget {
 @override
 _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 String str = 'Hello World!';
 bool b = false;

 void f1() {
  setState(() {
   int a = math.Random().nextInt(3);
   switch(a) {
    case 0: //#0 должно изменить текст в виджете Text #0
     str = '$a';
     break;
    case 1: //#1 должно изменить текст в виджете Text #1
     str = '$a';
     break;
    case 2: //#2 должно изменить текст в виджете Text #2
     str = '$a';
     break;
   }
  });
 }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
     appBar: AppBar(),
     body: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
       Text( //#0 как сделать здесь идентификатор?
        str,
        style: TextStyle(
         color: Colors.red,
         fontSize: 32.0
        ),
       ),
       Text( //#1 как сделать здесь идентификатор?
        str,
        style: TextStyle(
         color: Colors.green,
         fontSize: 32.0
        ),
       ),
       Text( //#2 как сделать здесь идентификатор?
        str,
        style: TextStyle(
         color: Colors.blue,
         fontSize: 32.0
        ),
       ),
       Expanded(
        child: FittedBox(
         fit: BoxFit.contain,
         child: CupertinoButton(
          onPressed: f1,
          borderRadius: BorderRadius.circular(15.0),
          color: Colors.orange,
          child: Text(
           'Ok',
           textAlign: TextAlign.center,
           style: TextStyle(color: Colors.white),
          ),
         ),
        ),
       ),

      ],
     ),
    );
  }
}

1 ответ 1

1

Все же прочитайте что из себя представляет декларативное программирование и узнайте разницу между императивном программированием.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(debugShowCheckedModeBanner: false, home: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String str = 'Hello World!';
  int a;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Text(
            (a == 0) ? a.toString() : str,
            style: TextStyle(color: Colors.red, fontSize: 32.0),
          ),
          Text(
            (a == 1) ? a.toString() : str,
            style: TextStyle(color: Colors.red, fontSize: 32.0),
          ),
          Text(
            (a == 2) ? a.toString() : str,
            style: TextStyle(color: Colors.red, fontSize: 32.0),
          ),
          Expanded(
            child: FittedBox(
              fit: BoxFit.contain,
              child: CupertinoButton(
                onPressed: () => setState(() => a = math.Random().nextInt(3)),
                borderRadius: BorderRadius.circular(15.0),
                color: Colors.orange,
                child: Text(
                  'Ok',
                  textAlign: TextAlign.center,
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
4
  • Уважаемый MiT, огромное Вам спасибо!
    – Anton
    Commented 14 февр. 2020 в 7:16
  • @Anton пожалуйста! Если будут вопросы спрашивайте!
    – MiT
    Commented 14 февр. 2020 в 7:28
  • onPressed: () => setState(() => a = math.Random().nextInt(3)), почему Вы setState выполняете непосредственно в обработчике, а не где нибудь в методе? Или все равно где?
    – Anton
    Commented 14 февр. 2020 в 7:30
  • 1
    @Anton если делать по хорошему, то логику приложения вообще надо выносить за UI. А так, когда код не большой можно и внутри обработчика написать (+ функциональный стиль все упрощает), но если было-бы N строк то выносят в отдельный метод. В общем разницы нет)
    – MiT
    Commented 14 февр. 2020 в 7:41

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.