Flutter布局

Column纵向垂直布局

image.png

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'my app',
      home: Scaffold(
        appBar: AppBar(
          title: Text('首页'),
        ),
        body: Container(
          child: Column(
            children: [
              Container(
                color: Colors.yellow,
                child: Text('文本1'),
              ),
              Container(
                color: Colors.green,
                child: Text('文本2'),
              ),
              Container(
                color: Colors.blue,
                child: Text('文本3'),
              )
            ],
          )
        ),
      ),
    );
  }
}

Row横向水平布局

image.png

child: Row(
  children: [
    Container(
      color: Colors.yellow,
      child: Text('文本1'),
    ),
    Container(
      color: Colors.green,
      child: Text('文本2'),
    ),
    Container(
      color: Colors.blue,
      child: Text('文本3'),
    )
  ],
)

Expanded

Expanded填充，可填充剩余空间。需在Column和Row内使用。

image.png

child: Row(
  children: [
    Container(
      color: Colors.yellow,
      child: Text('文本1'),
    ),
    Container(
      color: Colors.green,
      child: Text('文本2'),
    ),
    Expanded(
      child: Container(
      color: Colors.blue,
        child: Text('文本3'),
      ),
    )
  ],
)

混合使用

image.png

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'my app',
      home: Scaffold(
        appBar: AppBar(
          title: Text('首页'),
        ),
        body: Container(
          child: Column(
            children: [
              Container(
                child: Row(
                  children: [
                    Expanded(
                      child: Container(
                        color: Colors.yellow,
                        alignment: Alignment.center,
                        padding: EdgeInsets.symmetric(vertical: 10),
                        child: Text('文本1'),
                      ),
                    )
                  ],
                ),
              ),
              Container(
                child: Row(
                  children: [
                    Expanded(
                      flex: 1,
                      child: Container(
                        color: Colors.green,
                        alignment: Alignment.center,
                        padding: EdgeInsets.symmetric(vertical: 10),
                        child: Text('文本2'),
                      ),
                    ),
                    Expanded(
                      flex: 2,
                      child: Container(
                        color: Colors.blue,
                        alignment: Alignment.center,
                        padding: EdgeInsets.symmetric(vertical: 10),
                        child: Text('文本3'),
                      ),
                    ),
                    Expanded(
                      flex: 3,
                      child: Container(
                        color: Colors.cyan,
                        alignment: Alignment.center,
                        padding: EdgeInsets.symmetric(vertical: 10),
                        child: Text('文本4'),
                      ),
                    )
                  ],
                ),
              ),
              Container(
                child: Row(
                  children: [
                    Expanded(
                      flex: 1,
                      child: Container(
                        color: Colors.cyan,
                        alignment: Alignment.center,
                        padding: EdgeInsets.symmetric(vertical: 10),
                        child: Text('文本5'),
                      ),
                    ),
                    Expanded(
                      flex: 2,
                      child: Container(
                        color: Colors.green,
                        alignment: Alignment.center,
                        padding: EdgeInsets.symmetric(vertical: 10),
                        child: Text('文本6'),
                      ),
                    ),
                    Expanded(
                      flex: 1,
                      child: Container(
                        color: Colors.blue,
                        alignment: Alignment.center,
                        padding: EdgeInsets.symmetric(vertical: 10),
                        child: Text('文本7'),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          )
        ),
      ),
    );
  }
}