2022年5月15日

flutter基础教程(column布局)

作者 admin


分享几个学习flutter的学习网站与资源

flutter实战第二版https://book.flutterchina.club/chapter6/gridview.html#_6-6-1-%E9%BB%98%E8%AE%A4%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0

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'))
            ],
          )
        ),
      );
  }
}