flutter软件开发笔记08-容器使用方法

liuian 2025-05-21 14:59 39 浏览

在 Flutter 3 中，容器组件是用于布局、装饰或约束子组件的核心部件，能让程序更加美观，如何学习呢，能快速的应用起来，下面通过例子，来快速理解各种容器组件的使用方法。

一程序界面

二代码实现

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 容器组件示例',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const ContainerDemoScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('容器组件示例')),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            // 1. Container 示例
            _buildContainerDemo(),
            const SizedBox(height: 20),

            // 2. Row/Column 示例
            _buildRowColumnDemo(),
            const SizedBox(height: 20),

            // 3. Stack 示例
            _buildStackDemo(),
            const SizedBox(height: 20),

            // 4. ListView/GridView 示例
            _buildListAndGridDemo(),
            const SizedBox(height: 20),

            // 5. Expanded/Flexible 示例
            _buildExpandedDemo(),
            const SizedBox(height: 20),

            // 6. Card 示例
            _buildCardDemo(),
          ],
        ),
      ),
    );
  }

  // ---------- 以下是各个容器的构建方法 ----------

  // 1. Container 示例
  Widget _buildContainerDemo() {
    return Container(
      width: 200,
      height: 100,
      margin: const EdgeInsets.all(10),
      padding: const EdgeInsets.all(15),
      decoration: BoxDecoration(
        color: Colors.blue[100],
        borderRadius: BorderRadius.circular(10),
        border: Border.all(color: Colors.blue, width: 2),
      ),
      child: const Center(
        child: Text('Container', style: TextStyle(color: Colors.blue)),
      ),
    );
  }

  // 2. Row/Column 示例
  Widget _buildRowColumnDemo() {
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Container(width: 50, height: 50, color: Colors.red),
            Container(width: 50, height: 50, color: Colors.green),
            Container(width: 50, height: 50, color: Colors.blue),
          ],
        ),
        const SizedBox(height: 10),
        Column(
          children: const [
            Text('Row 水平排列'),
            Text('Column 垂直排列'),
          ],
        ),
      ],
    );
  }

  // 3. Stack 示例
  Widget _buildStackDemo() {
    return SizedBox(
      width: 200,
      height: 100,
      child: Stack(
        children: [
          Container(color: Colors.yellow[100]),
          Positioned(
            top: 10,
            left: 10,
            child: Container(width: 40, height: 40, color: Colors.red),
          ),
          const Positioned(
            bottom: 10,
            right: 10,
            child: Text('Stack 层叠'),
          ),
        ],
      ),
    );
  }

  // 4. ListView/GridView 示例
  Widget _buildListAndGridDemo() {
    return Column(
      children: [
        SizedBox(
          height: 100,
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: List.generate(
              5,
              (index) => Container(
                width: 80,
                margin: const EdgeInsets.all(5),
                color: Colors.orange[100],
                child: Center(child: Text('Item $index')),
              ),
            ),
          ),
        ),
        const SizedBox(height: 10),
        GridView.count(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          crossAxisCount: 3,
          children: List.generate(
            6,
            (index) => Container(
              margin: const EdgeInsets.all(2),
              color: Colors.purple[100],
              child: Center(child: Text('Grid $index')),
            ),
          ),
        ),
      ],
    );
  }

  // 5. Expanded/Flexible 示例
  Widget _buildExpandedDemo() {
    return Container(
      height: 80,
      color: Colors.grey[200],
      child: Row(
        children: [
          Expanded(
            flex: 2,
            child: Container(color: Colors.red, child: const Center(child: Text('Expanded'))),
          ),
          Flexible(
            flex: 1,
            child: Container(color: Colors.blue, child: const Center(child: Text('Flexible'))),
          ),
        ],
      ),
    );
  }

  // 6. Card 示例
  Widget _buildCardDemo() {
    return Card(
      elevation: 5,
      color: Colors.white,
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: const [
            Icon(Icons.star, color: Colors.amber, size: 40),
            SizedBox(height: 10),
            Text('Card 组件示例', style: TextStyle(fontWeight: FontWeight.bold)),
            Text('带阴影的卡片式布局'),
          ],
        ),
      ),
    );
  }
}

三代码讲解