flutter 的 EdgeInsets

Prefacio:

      flutter 的 EdgeInsets

Tabla de contenido

1. Los cuatro atributos proporcionados por el método EdgeInsets:

2. Uso real en el proyecto

3. Introducción al sitio web oficial: entrada

---

1. Los cuatro atributos proporcionados por el método EdgeInsets:

fromLTRB(double left, double top, double right, doublebottom)：分别指定四个方向的填充。
all(double value) : 所有方向均使用相同数值的填充。
only({left, top, right ,bottom })：可以设置具体某个方向的填充(可以同时指定多个方向)。
symmetric({vertical, horizontal})：用于设置对称方向的填充，vertical指top和bottom，horizontal指left和right。

2. Uso real en el proyecto

class PaddingTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      //上下左右各添加16像素补白
      padding: EdgeInsets.all(16.0),
      child: Column(
        //显式指定对齐方式为左对齐，排除对齐干扰
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            //左边添加8像素补白
            padding: const EdgeInsets.only(left: 8.0),
            child: Text("Hello world"),
          ),
          Padding(
            //上下各添加8像素补白
            padding: const EdgeInsets.symmetric(vertical: 8.0),
            child: Text("I am Jack"),
          ),
          Padding(
            // 分别指定四个方向的补白
            padding: const EdgeInsets.fromLTRB(20.0,.0,20.0,20.0),
            child: Text("Your friend"),
          )
        ],
      ),
    );
  }
}

3. Introducción al sitio web oficial: entrada

Seguridad de vacío de clase EdgeInsets 

Un conjunto de compensaciones que son constantes en cada una de las cuatro direcciones básicas.

Suele utilizarse para desviarse de cada uno de los cuatro lados de la caja. Por ejemplo, puede utilizar este tipo de representación para completar el cuadro.

Los EdgeInsets especifica el desplazamiento, izquierda, arriba, derecha, abajo y en el término clase del borde visual. Estos valores no se ven afectados por TextDirection . Para admitir diseños de izquierda a derecha y de derecha a izquierda, considere usar EdgeInsetsDirectional , que  se expresa en forma de inicio , superior, final e inferior, donde el inicio y el final se analizan mediante TextDirection (generalmente desde el direccionalidad ambiental ).

Asociar

muestra

A continuación, se muestran algunos ejemplos de cómo crear instancias de EdgeInsets :

 

Márgenes típicos de ocho píxeles en todos los lados:

tarea

const EdgeInsets.all(8.0)

 

Asociar

muestra

Márgenes de ocho píxeles superior e inferior, sin márgenes horizontales:

tarea

const EdgeInsets.symmetric(vertical: 8.0)

 

Asociar

muestra

Sangra el margen izquierdo en 40 píxeles:

tarea

const EdgeInsets.only(left: 40.0)

 

También puedes echar un vistazo:

• Padding , un widget que acepta EdgeInsets para describir sus márgenes.
• EdgeInsetsDirectional (utilizado para aceptar atributos y parámetros del tipo EdgeInsetsGeometry ) permite que las ilustraciones horizontales se especifiquen de manera compatible con TextDirection .