Voyz's Studio.

Flutter学习笔记-2

字数统计: 311阅读时长: 1 min
2020/08/24 Share

Flutter学习笔记-2

基础框架

代码结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@overirde
Widget build(buildContext context){
return MaterialApp(
title:'****',
home: Scaffold(
appBar: new AppBar(
tilte:'****'
),
body: ****
)
)
}
}

基础组件

Text/Container/ListView

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import 'package:flutter/material.dart';

void main() => runApp(
MyApp(items: new List<String>.generate(20, (i) => "这是第 ${i + 1} 个元素")));

class MyApp extends StatelessWidget {
final List<String> items;
MyApp({Key key, @required this.items}) : super(key: key);

@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Voyz Flutter Demo",
home: Scaffold(
appBar: new AppBar(
title: new Text('Voyz Flutter Demo'),
),
body: new ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return new Container(
child: new Text(
'${items[index]}',
style: TextStyle(fontSize: 18.0, color: Colors.yellow[100]),
),
alignment: Alignment.center,
width: 100.0,
height: 80.0,
color: Colors.red[300],
margin: const EdgeInsets.fromLTRB(0, 0, 0, 5.0),
);
})),
);
}
}

组件化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
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(
body:Center(
child:Container(
height:200.0,
child: MyListContent()
),
),
),
);
}
}

class MyListContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
Text(
'这是第一个',
style: TextStyle(
fontSize: 18.0,
color: Colors.red,
),
),
Text(
'这是第二个',
style: TextStyle(
fontSize: 18.0,
color: Colors.green,
),
),
Text(
'这是第三个',
style: TextStyle(
fontSize: 18.0,
color: Colors.lightBlue,
),
),
],
);
}
}
CATALOG
  1. 1. Flutter学习笔记-2
    1. 1.1. 基础框架
      1. 1.1.1. 代码结构
    2. 1.2. 基础组件
      1. 1.2.1. Text/Container/ListView
      2. 1.2.2. 组件化