Flutter 列小部件示例

本是古典何须时尚 2024-03-16 19:49 38阅读 0赞

import 'package:flutter/material.dart';
    
    void main() {
        
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
        
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            // This is the theme of your application.
            //
            // Try running your application with "flutter run". You'll see the
            // application has a blue toolbar. Then, without quitting the app, try
            // changing the primarySwatch below to Colors.green and then invoke
            // "hot reload" (press "r" in the console where you ran "flutter run",
            // or simply save your changes to "hot reload" in a Flutter IDE).
            // Notice that the counter didn't reset back to zero; the application
            // is not restarted.
            primarySwatch: Colors.blue,
          ),
          home: ColumnWidget(),
        );
      }
    }
    
    class ColumnWidget extends StatelessWidget {
        
      const ColumnWidget({
        super.key});
    
      @override
      Widget build(BuildContext context) {
        
        return Scaffold(
          appBar: AppBar(
            title: Text('Column Widget'),
          ),
          body: Container(
            width: 400,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Container(
                  height: 100,
                  width: 100,
                  color: Colors.red,
                ),
                Container(
                  height: 100,
                  width: 100,
                  color: Colors.black,
                ),
                Container(
                  height: 100,
                  width: 100,
                  color: Colors.amber,
                ),
              ],
            ),
          ),
        );
      }
    }

关注我的博客，您将在其中获得提示、技巧和挑战，以保持您的技能敏锐。记得关注我哦！