Flutter从入门到入土（二）Widget

1、Text 组件基本属性

 1 import 'package:flutter/material.dart';
 2 
 3 void main() => runApp(MyApp());
 4 
 5 class MyApp extends StatelessWidget{
 6   @override
 7   Widget build(BuildContext context) {
 8     // TODO: implement build
 9 
10     return MaterialApp(
11       title: 'Text widget',
12 
13       home: Scaffold(
14         body:Center(
15           child: Text(
16             'Hello Widget',
17             textAlign: TextAlign.center,
18             maxLines: 1,
19             //超出部分省略，fade是渐变
20             overflow: TextOverflow.ellipsis,
21             style: TextStyle(
22               fontSize: 25.0,
23               color: Color.fromARGB(255, 255, 125, 125),
24               //下划线
25               decoration: TextDecoration.underline,
26               decorationStyle: TextDecorationStyle.solid,
27             ),
28           ),
29         ),
30       ),
31     );
32   }
33 
34 }

 

 

2、Container使用

 1 import 'package:flutter/material.dart';
 2 
 3 void main() => runApp(MyApp());
 4 
 5 class MyApp extends StatelessWidget{
 6   @override
 7   Widget build(BuildContext context) {
 8     // TODO: implement build
 9 
10     return MaterialApp(
11       title: "Text Widget",
12 
13       home: Scaffold(
14         body: Center(
15           //子容器设置
16           child: Container(
17             child: new Text("Small Stars",
18               textAlign: TextAlign.center,
19               style: TextStyle(
20                   fontSize: 40.0,
21                   color: Color.fromARGB(255, 255, 125, 125)
22               ),
23             ),
24 
25             alignment: Alignment.center,
26             width: 500.0,
27             height: 400.0,
28             color: Colors.lightBlue,
29           ),
30         ),
31       ),
32 
33     );
34   }
35 
36 }

 

 

3、decoration 渐变使用

 1 import 'package:flutter/material.dart';
 2 
 3 void main() => runApp(MyApp());
 4 
 5 class MyApp extends StatelessWidget{
 6   @override
 7   Widget build(BuildContext context) {
 8     // TODO: implement build
 9 
10     return MaterialApp(
11       title: "Text Widget",
12 
13       home: Scaffold(
14         body: Center(
15           //子容器设置
16           child: Container(
17             child: new Text("Small Stars",
18               textAlign: TextAlign.center,
19               style: TextStyle(
20                   fontSize: 40.0,
21                   color: Color.fromARGB(255, 255, 125, 125)
22               ),
23             ),
24 
25             alignment: Alignment.topLeft,
26             width: 500.0,
27             height: 400.0,
28             //color: Colors.lightBlue,
29 
30             //外边距设置
31             //padding: const EdgeInsets.all(30.0),
32             padding: const EdgeInsets.fromLTRB(100.0, 200.0, 0.0, 0.0),
33             //内边距
34             margin: const EdgeInsets.all(30.0),
35 
36             //渐变
37             decoration: new BoxDecoration(
38               //线性渐变
39               gradient: const LinearGradient(
40                   begin: Alignment.topLeft,
41 //                  end: Alignment(0.8, 0.0), // 10% of the width, so there are ten blinds.
42 //                  colors: [Colors.lightBlue, Colors.greenAccent, Colors.purple], // whitish to gray
43                   tileMode: TileMode.repeated, // repeats the gradient over the canvas
44                   colors: [Colors.lightBlue, Colors.deepOrange, Colors.teal]
45               ),
46 //              border: Border.all(width: 5.0, color: Colors.pinkAccent)
47             ),
48           ),
49         ),
50       ),
51 
52     );
53   }
54 
55 }

 

 

 

报错：
Cannot provide both a color and a decoration
To provide both, use "decoration: BoxDecoration(color: color)".
'package:flutter/src/widgets/container.dart':
Failed assertion: line 320 pos 15: 'color == null || decoration == null'

原因是color 和 decoration 不能同时使用，去掉一个即可

 

posted @ 2020-05-17 16:30  北冥雪  阅读(333)  评论(0)  编辑  收藏  举报