flutter布局-水平布局Row

不靈活水平布局：

根據Row子元素的大小，進行布局。如果子元素不足，它會留有空隙，如果子元素超出，它會警告。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
		return MaterialApp(
			title: 'flutter demo',
			home: Scaffold(
				appBar: new AppBar(
					title: new Text('水平方向布局Row'),
				),
				body: new Row(
					children: [
						new RaisedButton(
							onPressed: (){

							},
							color: Colors.red,
							child: new Text('紅色按鈕'),
						),
						new RaisedButton(
							onPressed: (){

							},
							color: Colors.green,
							child: new Text('綠色按鈕綠色按鈕'),
						),
						new RaisedButton(
							onPressed: (){

							},
							color: Colors.blue,
							child: new Text('藍色按鈕'),
						)
					]
				)
			)
		);
	}
}

　　

三個按鈕並沒有充滿一行，而是出現了空隙。這就是不靈活橫向排列造成的。它根據子元素的大小來進行排列。

 

靈活水平布局：

如果想實現三個按鈕充滿一行的效果，可以使用 Expanded。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'flutter demo',
            home: Scaffold(
                appBar: new AppBar(
                    title: new Text('水平方向布局Row'),
                ),
                body: new Row(
                    children: [
                        Expanded(child: new RaisedButton(
                            onPressed: (){

                            },
                            color: Colors.red,
                            child: new Text('紅色按鈕'),
                        )),
                        Expanded(child: new RaisedButton(
                            onPressed: (){

                            },
                            color: Colors.green,
                            child: new Text('綠色按鈕綠色按鈕'),
                        )),
                        Expanded(child: new RaisedButton(
                            onPressed: (){

                            },
                            color: Colors.blue,
                            child: new Text('藍色按鈕'),
                        ))
                    ]
                )
            )
        );
    }
}

 

 

靈活和不靈活混用：

如果想讓中間的按鈕大，而兩邊的按鈕保持真實大小，就可以不靈活和靈活模式進行混用，實現效果。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'flutter demo',
            home: Scaffold(
                appBar: new AppBar(
                    title: new Text('水平方向布局Row'),
                ),
                body: new Row(
                    children: [
                        new RaisedButton(
                            onPressed: (){

                            },
                            color: Colors.red,
                            child: new Text('紅色按鈕'),
                        ),
                        Expanded(child: new RaisedButton(
                            onPressed: (){

                            },
                            color: Colors.green,
                            child: new Text('綠色按鈕綠色按鈕'),
                        )),
                        new RaisedButton(
                            onPressed: (){

                            },
                            color: Colors.blue,
                            child: new Text('藍色按鈕'),
                        )
                    ]
                )
            )
        );
    }
}