Flutter：可以在其中添加Text（）

Question

我想点击屏幕，然后将背景色更改为随机色。它工作正常，但我想在屏幕中央添加文本，请帮帮我。也许有人有想法，谢谢！我尝试将多个子项添加到AnimatedContainer中。试图在GestureDetector中添加文本，但无法正常工作

TopScreen.dart

import 'package:flutter/material.dart';

class TopScreen extends StatefulWidget {
  final Widget child; //child widget

  TopScreen({this.child});

  @override
  State createState() => _TopScreenState();

  static _TopScreenState of (BuildContext context) {
    assert(context != null);
    final _TopScreenState result = context.findAncestorStateOfType();
    return result;
  }
}

class _TopScreenState extends State<TopScreen> {
  Color _color = Colors.white;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: AnimatedContainer(
          child: widget.child,
          color: _color,
          duration: Duration(milliseconds: 500),
        ),
    );
  }

  void setColor(Color color) {
    this._color = color;
  }
}

main.dart

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:solidsoftwaretest/TopScreen.dart';

void main() => runApp(MaterialApp(home: TopScreen(child: MainScreen())));

class MainScreen extends StatefulWidget {
  @override
  State createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
            onTap: () {
              TopScreen.of(context).setColor(Colors.primaries[Random().nextInt(Colors.primaries.length)]);
              TopScreen.of(context).setState(() {});
            },

    );
  } //build
}

Answer 1

您应该可以在Column中放入AnimatedContainer。 Column将保存多个Widgets。这应该可以满足您的需求：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: AnimatedContainer(
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            widget.child,
            Text('A text widget')
          ],
        )
      ),
      color: _color,
      duration: Duration(milliseconds: 500),
    ),
  );
}