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
    14 фев 2020 в 7:16
  • @Anton пожалуйста! Если будут вопросы спрашивайте!
    – MiT
    14 фев 2020 в 7:28
  • onPressed: () => setState(() => a = math.Random().nextInt(3)), почему Вы setState выполняете непосредственно в обработчике, а не где нибудь в методе? Или все равно где?
    – Anton
    14 фев 2020 в 7:30
  • 1
    @Anton если делать по хорошему, то логику приложения вообще надо выносить за UI. А так, когда код не большой можно и внутри обработчика написать (+ функциональный стиль все упрощает), но если было-бы N строк то выносят в отдельный метод. В общем разницы нет)
    – MiT
    14 фев 2020 в 7:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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