flutter 技巧总结

css/文本相关.md

@@ -1,6 +1,6 @@
 # 文本相关css 处理
 ## 文本溢出
-    1. 单行文本
+   1. 单行文本
        1. 溢出隐藏
           1. `overflow简单隐藏`
             css代码: `overflow:hidden;` 
@@ -13,8 +13,8 @@
                 overflow: hidden;
                 text-overflow: ellipsis;
             ``` 
-    2. 多行文本溢出
+   2. 多行文本溢出
          
-    4. 相关知识点
+   4. 相关知识点
        1. 文本盒子需要设置宽度来限制文本可以存在的位置
        2. 在flex布局中自动撑开内容的盒子进行文本溢出处理 可以给元素的 ` width ` 设置为0来实现

flutter/初学.md

@@ -51,40 +51,44 @@
           void main() => runApp(new MyApp()); 
      ```
 5. 在布局中如何定义宽高
-   1. 使用container组件来定义宽高,以及边距
-   2. container组件必须得包含在一个组件中才能正常的设置宽度,否则设置宽度无效
-     > 此处的container组件在外面的一个因为有center进行包裹所以可以设置宽度,在内部的container组件因为是直接被包裹在container中无法被设置宽度
-          ```
-               Center(
-                    child: Container(
+     1. 使用container组件来定义宽高,以及边距
+     2. container组件必须得包含在一个组件中才能正常的设置宽度,否则设置宽度无效
+          > 此处的container组件在外面的一个因为有center进行包裹所以可以设置宽度,在内部的container组件因为是直接被包裹在container中无法被设置宽度
+               ```
+                    Center(
                          child: Container(
-                              child: Text("你好"),
-                              color: Colors.red,
-                              width: 100.0,
-                              height: 50.0,
+                              child: Container(
+                                   child: Text("你好"),
+                                   color: Colors.red,
+                                   width: 100.0,
+                                   height: 50.0,
+                              ),
+                              width: 240.0,
+                              height: 100.0,
+                              color: Colors.green,
+                              padding: EdgeInsets.symmetric(vertical: 5),
                          ),
-                         width: 240.0,
-                         height: 100.0,
-                         color: Colors.green,
-                         padding: EdgeInsets.symmetric(vertical: 5),
-                    ),
-               )
-          ```
+                    )
+               ```
+     3. 设置填满屏幕的宽度,下面两种方式都可以
+        ```
+          width: MediaQuery.of(context).size.width,
+          width: double.infinity,
+        ``` 
 
-5. 设置单个方向的边框
+6. 设置单个方向的边框
    1. 需求描述
       1. 需要给一个row组件添加一个下划线进行分割
    2. 解决方法
       1. 在row组件外部包裹一层   `Container` 进行设置装饰器属性`decoration` 赋值 `BoxDecoration` ,在其中设置border属性,赋值为
           ```
-
                bottom: BorderSide(
                     width: 0.5,
                     color: Colors.red,
                ),
           ```
 
-6. 文本超出隐藏
+7. 文本超出隐藏
    1. 结构描述,在单个的container中有设置row的组件,row组件内部设置了一个text组件和一个icon组件,text组件内的文字内容过长时会出现异常
    2. 解决办法
       1. 在 `Text` 文字的外层包裹一层`Expanded` 进行解决