flutter 动手篇1 - 线性布局 Column & Row

柔情只为你懂 2021-10-01 12:00 358阅读 0赞

## 线性布局 Column & Row ##

import 'package:flutter/material.dart';
    
    void main() => runApp(new MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Column & Row',
          theme: new ThemeData(
            primarySwatch: Colors.lightBlue,
          ),
          home: new MyHome(),
        );
      }
    }
    
    class MyHome extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: AppBar(
            title: Text("Column & Row", style: TextStyle(color: Colors.white))
          ),
          body: Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,//主轴方向居中显示
                  children: <Widget>[
                    Text(' Hello World! '),
                    Text(' I am Charming '),
                  ],
                ),
                Row(
                  mainAxisSize: MainAxisSize.min, //相当于css中的display: inline-block;max相当于display:block;
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(' Hello World! '),
                    Text(' I am Charming '),
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  textDirection: TextDirection.rtl,
                  children: <Widget>[
                    Text(' Hello World! '),
                    Text(' I am Charming '),
                  ],
                ),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  verticalDirection: VerticalDirection.up,//垂直方向从上往下显示
                  children: <Widget>[
                    Text(' Hello World! ', style: TextStyle(fontSize: 20.0)),
                    Text(' I am Charming '),
                  ],
                )
              ],
            ),
          ),
        );
      }
    }

效果展示 //

![6587214-74c5d5dc7c344b6d.png][]

image.png

[6587214-74c5d5dc7c344b6d.png]: /images/20210804/e2fd7e07ee5945909ed3b8272b802e92.png