Flutter

Question

我对 flutter 很陌生，所以创建了这个脚本。

当您点击红色容器时，您会创建一行按钮，我想当我点击行中的一个按钮时 -> 蓝色容器的文本变得与点击按钮中包含的文本相同

有人知道我该怎么做吗？

谢谢:)

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

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

class mainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Chat(),
    );
  }
}

class Chat extends StatefulWidget {
  const Chat({Key? key}) : super(key: key);

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

class _ChatState extends State<Chat> {
  String text = 'Henlo i am Gabriele!';

  List<Container> OutputList = [];

  void tool(String text) async {
    List ListText = text.split(' ');

    for (var i in ListText) {
      OutputList.add(
        Container(
          child: GestureDetector(
            onTap: () {},
            child: Padding(
              padding: const EdgeInsets.all(4.0),
              child: Container(
                color: Colors.orange,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(i),
                ),
              ),
            ),
          ),
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            GestureDetector(
              onTap: () {
                setState(() {
                  tool(text);
                  print(OutputList);
                });
              },
              child: Container(
                width: 150.0,
                height: 50.0,
                color: Colors.red,
                child: Center(child: Text('START ->')),
              ),
            ),
            SizedBox(height: 50.0),
            Row(
              children: OutputList,
            ),
            SizedBox(height: 50.0),
            Container(
              color: Colors.blue,
              width: 200.0,
              height: 50.0,
              child: Text(''),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

是的，您可以在此处添加几行代码检查，我尝试解决。


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

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

class mainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Chat(),
    );
  }
}

class Chat extends StatefulWidget {
  const Chat({Key? key}) : super(key: key);

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

class _ChatState extends State<Chat> {
  String text = 'Henlo i am Gabriele!';
  
  //step 1 create variable
  
  String newGeneratedText = "";

  List<Container> OutputList = [];

  void tool(String text) async {
    List ListText = text.split(' ');

    for (var i in ListText) {
      OutputList.add(
        Container(
          child: GestureDetector(
            onTap: () {
              //add logic here to concatinate values
              setState(() {
                newGeneratedText = newGeneratedText + " " + i;//added " " for one space
              });
            },
            child: Padding(
              padding: const EdgeInsets.all(4.0),
              child: Container(
                color: Colors.orange,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(i),
                ),
              ),
            ),
          ),
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            GestureDetector(
              onTap: () {
                setState(() {
                  tool(text);
                  print(OutputList);
                });
              },
              child: Container(
                width: 150.0,
                height: 50.0,
                color: Colors.red,
                child: Center(child: Text('START ->')),
              ),
            ),
            SizedBox(height: 50.0),
            Wrap( // added for fixing more values and solve overflow exceptions error
              children: OutputList,
            ),
            SizedBox(height: 50.0),
            Container(
              color: Colors.blue,
              width: 200.0,
              height: 50.0,
              child: Text(newGeneratedText), //final print values
            ),
          ],
        ),
      ),
    );
  }
}

Flutter - 添加行 -> 更改容器的文本

Flutter - Row added -> change the text of a container

row

gesturedetector

dart