Flutter中Text与Container 组件_flutter container 撑满父widget

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title:const Text("你好Flutter")),
        body:const MyApp(),
      ),
    )
  );
}

class MyApp extends StatelessWidget{
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text("你好Flutter"),
    );
  }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

• Container 容器

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title:const Text("你好Flutter")),
        body:Column(
          children: const[
            MyApp(),
            MyButton(),
            MyText()
          ]
        )
      ),
    )
  );
}

class MyApp extends StatelessWidget{
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        margin:const EdgeInsets.fromLTRB(0, 60, 0, 0),
        alignment: Alignment.center, //配置Container 容器内元素位置的方法
        height: 200,
        width: 200,
        // transform: Matrix4.translationValues(10,0,0), //位移
        // transform: Matrix4.rotationZ(0.2), //延左上角旋转
        transform: Matrix4.skewY(0.2), //倾斜
        decoration: BoxDecoration(
            color: Colors.yellow, //背景颜色
            border:Border.all( //边框
              color: Colors.red,
              width: 2
            ),
            borderRadius: BorderRadius.circular(10), //配置圆角 也可以实现圆形 100
          boxShadow:const [ //配置阴影效果
            BoxShadow(
              color: Colors.blue,
              blurRadius: 20.0
            )
          ],
          //LinearGradient 线性渐变 RadialGradient 径向渐变
          gradient: const LinearGradient(
            colors:[
              Colors.red,Colors.yellow
            ]
          )
        ),
        child: const Text("你好Flutter",style: TextStyle(
          color: Colors.black,
          fontSize: 20,

        ),),
      ),
    );
  }

}

class MyButton extends StatelessWidget{
  const MyButton({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      width: 200,
      height: 40,
      // margin:const EdgeInsets.all(10),
      margin: const EdgeInsets.fromLTRB(0, 20, 0, 0),
      // padding: const EdgeInsets.fromLTRB(40,0,0,0),
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(20)
      ),
      child: const Text("按钮",style: TextStyle(
        color: Colors.white,
        fontSize: 20
      ),
      ),
    );
  }

}

class MyText extends StatelessWidget{
  const MyText({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      margin: const EdgeInsets.fromLTRB(0, 50, 0, 0),
      decoration: const BoxDecoration(
        color: Colors.yellow
      ),
      child:const Text("你好我是Flutter你好我是Flutter你好我是Flutter你好我是Flutter",
        textAlign: TextAlign.right,
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
        style: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.w900,
          color: Colors.red,
          fontStyle: FontStyle.italic,
          letterSpacing: 1,
          decoration: TextDecoration.underline,
          decorationColor: Colors.black,
          decorationStyle: TextDecorationStyle.dashed
        ),
      ),

    );
  }
  
}
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122