Flutter开发（八）—— 五种布局之Column Widget垂直布局组件

关注

原创最新推荐文章于 2026-07-30 11:27:50 发布 451 阅读 AI 写同款· GEO 优化 ›

Flutter布局系统全面解析：从基础组件到复杂界面构建在移动应用开发领域，良好的界面布局是用户体验的基础。Flutter作为Google推出的跨平台UI框架，提供了一套强大而灵活的布局系统，使开发者能够高效构建美观且响应式的用户界面。本文将全面剖析Flutter的核心布局组件，包括Row、Column、Stack、Flex、Container和Padding等，通过理论讲解和实际代码示例，帮助开发者掌握Flutter布局的精髓。阅读详情

代码示例：
在Flutter中 Row（水平）和 Column（垂直），就属性而言基本都是相同的，只是属性控制的方向不同。以下代码中有其常用的属性，具体的多说无益，跑代码来的更直观。

import 'package:flutter/material.dart';

main(List<String> args) {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Row 布局',
      home: Scaffold(
        appBar: new AppBar(title: new Text('Column 垂直布局')),
        body: Center( //将Column整体布局居中
          child: new Column(  //Column 垂直布局
            crossAxisAlignment: CrossAxisAlignment.end, //控制 children: <Widget> 中的子View靠左（start）中(center)右(end)
            mainAxisAlignment: MainAxisAlignment.end, //控制 子View 相对于 整体父布局位置 上（start）中(center)下(end)
            children: <Widget>[ //其子Widget 用children: <Widget>[ ] 包裹
              new RaisedButton(
                onPressed: () {},
                color: Colors.blueGrey,
                child: Text('blueGrey'),
                textColor: Color(0xffff0000),
              ),

              new RaisedButton( //  没有Expanded  则子Widget展示自身大小
                onPressed: () {},
                color: Colors.orangeAccent, //RaisedButton默认颜色
                highlightColor: Color(0xff00ff00), //RaisedButton点击颜色
                child: Text('orangeAccent'), //Text内容
                textColor: Color(0xffff0000), //Text 内容字体颜色
              ),

              new RaisedButton(
                onPressed: () {},
                color: Colors.lightBlueAccent,
                child: Text('lightBlueAccent'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}