如何在下面添加文本“ pomodone”在扑来？

Question

我正在尝试修改我的颤音布局，以在“ pomodone”文本下方显示另一个文本。这是我想实现的视觉表示：

当前，我的布局看起来像这样：

这是我的相关代码：

  class HomePage extends StatelessWidget {
      const HomePage({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Color(0xffF24004),
          body: Center(
            child: Container(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  GestureDetector(
                    onTap: () {
                      print("Container clicked");
                      Navigator.pushReplacement(
                          context, MaterialPageRoute(builder: (_) => LogIn()));
                    },
                    child: Container(
                      width: 202,
                      height: 196,
                      margin: EdgeInsets.all(100.0),
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: Color(0xffF2B749),
                      ),
                      child: const Center(
                        child: Text("P O M O D O N E", style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 22,
                        color: Color(0xff313640),
                      ),),
    
                      ),
                    ),
                  ),
                  Center(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Container(
                          width: 75,
                          height: 112,
                          child: Icon(Icons.check_rounded,
                              size: 100,
                              color: Color(0xffF3F5F4),
                          ),
                        ),
                      ],
                    ),
                  ) 
                ],
              ),
            ),
          ),
        );
      }
    }

我尝试复制pomodone文本容器，但这无法正常工作。您能帮我调整布局吗？

Answer 1

这很简单。 可以使用 column（）使用 mainaxisAlignment mainaxisalignment.center.center ：

Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          "P O M O D O N E",
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 22,
            color: Color(0xff313640),
          ),
        ),
        Text('click me')
      ],
    )

由于您想要一个小部件下方的一个小部件，因此 要删除 center（）窗口小部件代替 column（）。

使用您的代码，一个完整的可运行示例：

import 'package:braintrinig/pages/log_in.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffF24004),
      body: Center(
        child: Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              GestureDetector(
                onTap: () {
                  print("Container clicked");
                  Navigator.pushReplacement(
                      context, MaterialPageRoute(builder: (_) => LogIn()));
                },
                child: Container(
                  width: 202,
                  height: 196,
                  margin: EdgeInsets.all(100.0),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Color(0xffF2B749),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text("P O M O D O N E", style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 22,
                        color: Color(0xff313640),
                      ),),
                      Text('Click me')
                    ],
                  ),
                ),
              ),
              Center(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                      width: 75,
                      height: 112,
                      child: Icon(Icons.check_rounded,
                        size: 100,
                        color: Color(0xffF3F5F4),
                      ),
                    ),
                  ],
                ),
              ) // Add Another Icon Here
            ],
          ),
        ),
      ),
    );
  }
}

---

我建议您花时间阅读。