Flutter容器内多文本布局技术问询：如何在STORE OF VALUE区块下方添加'BTC'文本

Got it! Let's tweak your StockPage to add the 'BTC' text right below the 'STORE OF VALUE' heading while keeping all your existing layout and styling intact. Here's the adjusted code with clear modifications:

import 'package:flutter/material.dart';

class StockPage extends StatelessWidget {
  const StockPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.count(
        crossAxisCount: 2,
        padding: const EdgeInsets.all(16),
        crossAxisSpacing: 16,
        mainAxisSpacing: 16,
        childAspectRatio: 1.5,
        children: [
          // Modified STORE OF VALUE container
          Container(
            decoration: BoxDecoration(
              color: Colors.green,
              borderRadius: BorderRadius.circular(8),
            ),
            child: const Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'STORE OF VALUE',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                  ),
                  textAlign: TextAlign.center,
                ),
                SizedBox(height: 8), // Small spacing between heading and BTC
                Text(
                  'BTC',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 14,
                  ),
                ),
              ],
            ),
          ),
          // Existing SMART CONTRACTS container (unchanged)
          Container(
            decoration: BoxDecoration(
              color: Colors.green,
              borderRadius: BorderRadius.circular(8),
            ),
            child: const Center(
              child: Text(
                'SMART CONTRACTS',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                ),
                textAlign: TextAlign.center,
              ),
            ),
          ),
          // Add your other remaining category containers here...
        ],
      ),
    );
  }
}

Quick Breakdown of the Changes: #

• Swapped the single Center widget inside the 'STORE OF VALUE' container for a Column—this lets us stack the heading and 'BTC' text vertically.
• Kept mainAxisAlignment: MainAxisAlignment.center to maintain the original centered alignment of content in the container.
• Added a SizedBox(height: 8) to create a clean gap between the heading and 'BTC' text (you can adjust this value for more/less spacing).
• Left all other GridView properties (like crossAxisCount, spacing, childAspectRatio) and container styles exactly as they were—so your overall layout stays consistent.

Feel free to tweak the TextStyle for the 'BTC' text (font size, weight, color) to match your design needs!

内容的提问来源于stack exchange，提问作者Remy Danon