如何在 Flutter 中的“POMODONE”下方添加文字？

Question

我正在尝试修改我的 Flutter 布局以在“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

：

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
            ],
          ),
        ),
      ),
    );
  }
}

---

我建议你花点时间阅读关于 Flutter 中的布局的官方文档。