Flutter 入门Text Image ListView简单案例

1.创建第一个Flutter项目

替换 lib/main.dart.

删除lib / main.dart中的所有代码，然后替换为下面的代码，它将在屏幕的中心显示“Hello World”.

//库的导入
import 'package:flutter/material.dart';
//程序入口
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',						
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(					//布局组件
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

效果：

Text Wdige使用

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'First Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text(
              '主页'
          ),
        ),
        body: new Center(
          child: new Text(
              '当文字超过1行时，我可以使用textAlign标签来处理哟，试试看把',
               textAlign: TextAlign.center,
                //设置行数
                maxLines: 1,
                //超出一行设置3个点
                overflow: TextOverflow.ellipsis,
                //样式
                style: TextStyle(
                  //浮点数
                    fontSize: 25.0,
                ),
          ),
        ),
      ),
    );
  }
}

Image引入

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'First Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text(
              '主页'
          ),
        ),
        body: new Container(
        //network 网络地址
            child: new Image.network(
                'https://i.loli.net/2020/05/06/xEal2mK4PVMhTBn.png',
                //横向充满
//                fit: BoxFit.fitWidth,
            ),
          width: 500.0,
          height: 100.0,
          color: Colors.lightBlue,
        ),
      ),
    );
  }
}

效果：

ListView使用

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'First Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text(
              '主页'
          ),
        ),
       body: new ListView(
          children:<Widget>[
              new ListTile(
                  leading: new Icon(Icons.account_balance),
                  title: new Text('account_balance'),
              ),
              new ListTile(
                leading: new Icon(Icons.add_box),
                title: new Text('add_box'),
              ),
              new ListTile(
                leading: new Icon(Icons.alarm),
                title: new Text('alarm'),
              ),
            new Image.network('https://i.loli.net/2020/04/01/9h7YqAdsaS2ZOC5.jpg'),
            new Image.network('https://i.loli.net/2020/04/01/Fswye9IxVOiLUY6.jpg'),
          ]
       ),
      ),
    );
  }
}