如何在顫動中更改具有多個文本按鈕的容器的顏色？

我有這個練習，上面有一個容器，下面有四個文本按鈕。當我按下 4 個文本按鈕之一（每個都有另一種顏色）時，頂部容器應該改變顏色。現在我知道這必須通過自定義函式發生，該函式應該采用文本按鈕的顏色或采用頂部容器的原始顏色。我可以通過為每種顏色分配一個數字作為變數并將其作為引數輸入到上面的顏色小部件中來做到這一點嗎？

我有點堅持。

謝謝。

uj5u.com熱心網友回復：

檢查這個例子

import 'package:flutter/material.dart';

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

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

class _HomeState extends State<Home> {
  Color color = Colors.amber;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Container color")),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: Container(
              decoration: BoxDecoration(
                  color: color,
                  borderRadius: const BorderRadius.all(Radius.circular(10))),
              height: 100,
              width: 100,
            ),
          ),
          const SizedBox(
            height: 20,
          ),
          Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Center(
                      child: InkWell(
                        onTap: () {
                          setState(() {
                            color = Colors.amber;
                          });
                        },
                        child: Container(
                          decoration: const BoxDecoration(
                              color: Colors.amber,
                              borderRadius:
                                  BorderRadius.all(Radius.circular(10))),
                          height: 100,
                          width: 100,
                        ),
                      ),
                    ),
                    Center(
                      child: InkWell(
                        onTap: () {
                          setState(() {
                            color = Colors.blue;
                          });
                        },
                        child: Container(
                          decoration: const BoxDecoration(
                              color: Colors.blue,
                              borderRadius:
                                  BorderRadius.all(Radius.circular(10))),
                          height: 100,
                          width: 100,
                        ),
                      ),
                    )
                  ],
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Center(
                      child: InkWell(
                        onTap: () {
                          setState(() {
                            color = Colors.red;
                          });
                        },
                        child: Container(
                          decoration: const BoxDecoration(
                              color: Colors.red,
                              borderRadius:
                                  BorderRadius.all(Radius.circular(10))),
                          height: 100,
                          width: 100,
                        ),
                      ),
                    ),
                    Center(
                      child: InkWell(
                        onTap: () {
                          setState(() {
                            color = Colors.green;
                          });
                        },
                        child: Container(
                          decoration: const BoxDecoration(
                              color: Colors.green,
                              borderRadius:
                                  BorderRadius.all(Radius.circular(10))),
                          height: 100,
                          width: 100,
                        ),
                      ),
                    )
                  ],
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}

標籤：

上一篇：使用python3更正日期中的拼寫錯誤

下一篇：通過void函式呼叫分配指標欄位的結構