2022年5月15日
flutter基础教程(column布局)
分享几个学习flutter的学习网站与资源
flutter中文文档https://flutter.cn/docs/get-started/flutter-for/web-devs
main_column1.dart
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'ListView widget',
home:Scaffold(
appBar:new AppBar(
title:new Text('垂直方向布局'),
),
body:Column(
children: <Widget>[
Text('I am JSPang'),
Text('my website is jspang.com'),
Text('I love coding')
],
)
),
);
}
}
main_column2.dart
import 'package:flutter/material.dart';
void main () => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'ListView widget',
home:Scaffold(
appBar:new AppBar(
title:new Text('垂直方向布局'),
),
body:Column(
// CrossAxisAlignment.star:居左对齐。
// CrossAxisAlignment.end:居右对齐。
// CrossAxisAlignment.center:居中对齐。
crossAxisAlignment: CrossAxisAlignment.start, //副轴左对齐
mainAxisAlignment: MainAxisAlignment.center,//垂直主轴对齐
children: <Widget>[
Center(child:Text('I am JSPang')),
Expanded(child:Center(child:Text('my website is jspang.com'))),
Center(child:Text('I love coding'))
],
)
),
);
}
}