Flutter表单，列表，表格，盒子

对接部分

    row/Column
    
     mainAxisAlignment: MainAxisAlignment.spaceBetween, // 相对子元素两边
     crossAxisAlignment: CrossAxisAlignment.center, // 相对父元素居中
    

    Flex(
        direction: Axis.horizontal,
        children：[
            //不会自适应
            Expanded(),
            // 会自动适应
            Flexible()
        ],
        
    )

    position(
    
    )

表单(一)

class Detailspage extends StatefulWidget {
  const Detailspage({super.key});

  @override
  State<Detailspage> createState() => _DetailspageState();
}

class _DetailspageState extends State<Detailspage> {
  // 控制器
  final TextEditingController _controller = TextEditingController();
  // 表单状态
  final _formKey = GlobalKey<FormState>();
  // 获取焦点
  final FocusNode _focusNode = FocusNode();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _focusNode.addListener(() {
      print("获得焦点");
    });
  }

  @override
  Widget build(BuildContext context) {
    return Material(
        child: Padding(
      padding: EdgeInsets.all(12),
      child: Form(
          // 表单状态
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                // 键盘类型
                keyboardType: TextInputType.text,
                // 控制器
                controller: _controller,
                // 获取焦点
                focusNode: _focusNode,
                autovalidateMode: AutovalidateMode.onUserInteraction,
                // 掩盖密码
                obscureText: true,
                // 验证器
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return "Data is null";
                  }
                  return null;
                },
                // 样式
                decoration: InputDecoration(
                    // 提示文本
                    labelText: "请输入文本",
                    //焦点文本
                    hintText: "名称",
                    //外边框
                    border: OutlineInputBorder()),
              ),
              SizedBox(
                height: 10,   
              ),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(
                        content: Text('running ... '),
                      ),
                    );
                    _formKey.currentState!.reset();
                  }
                },
                child: Text("提交"),
              ),
              // Checkbox(value: value, onChanged: onChanged)
            ],
          )),
    ));
  }
}

列表

     ListView(
        // 水平
        scrollDirection: Axis.horizontal,
        //内边距
        padding: EdgeInsets.all(10),
        // 子元素
        children：_forList(),
     )

ListView.buider(
    //必须指定长度
    iteamCount:List.length,
    // 子元素
    iteamBuider:_forListBuider
)

表格

• GridView.count

    GridView.count(
        crossAxisCount: 3, //一行多少个
        crossAxisSpacing: 20, //水平间距
        mainAxisSpacing: 10, // 垂直间距
        childAspectRatio: 0.7, //宽高比
        children: _forList(),
   ),

• GridView.extent

     GridView.count(
        crossAxisCount: 3, //一行多少个
        crossAxisSpacing: 20, //水平间距
        mainAxisSpacing: 10, // 垂直间距
        childAspectRatio: 0.7, //宽高比
        children: _forList(),
   ),

• GridView.buider

    GridView.builder(
        //指定数据长度
        iteamCount:ListData.length,
        // FixedCross/MaxCross
        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        crossAxisCount: 3, //一行多少个
        crossAxisSpacing: 20, //水平间距
        mainAxisSpacing: 10, // 垂直间距
        childAspectRatio: 0.7, //宽高比
        ), 
        itemBuilder: _forListBuider
     )

• 循环列表

List<Widget> _forList(){
    // 循环对象
    ver template=listData.map((value){
        return Container(
            // 宽度
            width: 100,
            // 高度
            height: 100,
        );
    });
    return template.toList();
}

Widget  _forListBuider(context,index){
    return Container(
           // 宽度
           width: 100,
           // 高度
         height: 100,
     );
}

盒子

这里的盒子，不是传统意义的盒子,而是基本的widget，也不是样板或者模版的widget,例如Scaffed,Material,MaterialApp，AppBar。也不是布局用的wedget例如Row,Column，而是最常用的Container容器。

 Container(
        // 宽度
        width: 100,
        // 高度
        height: 100,
        // 布局
        alignment: Alignment.center,
        // 外边距--所有
        // margin: EdgeInsets.all(10),
        // 外边距--只有一边
        // margin: EdgeInsets.fromLTRB(10, 0, 0, 0),
        // 内边距--所有
        // padding: EdgeInsets.all(10),
        // 内边距--只有一边
        // padding:EdgeInsets.fromLTRB(10, 0, 0, 0),
        //平移
        // transform: Matrix4.translationValues(0, 0, 10),
        // z轴旋转
        // transform: Matrix4.rotationZ(10),
        //倾斜
        // transform:Matrix4.skewY(0.2),
        //盒子样式
        decoration: BoxDecoration(
          // 圆角
          borderRadius: BorderRadius.circular(10),
          // 背景颜色
          color: Colors.blue,
          // 边框
          border:Border.all(
            // 边框颜色
            color:Colors.yellow,
            // 边框宽度
            width: 2
          ),
          // 盒子阴影
          boxShadow: [
            BoxShadow(
              // 模糊颜色
              color: Colors.black,
              // 模糊半径
              blurRadius: 60.0
            )
          ],
          // 线性渐变
          gradient: LinearGradient(colors: [
              Colors.red,Colors.white
          ])
        ),
        // 嵌套元素
        child: const Text("data",
        //对齐方式
        textAlign: TextAlign.center,
        // 显示几行
        maxLines: 1,
        // 溢出方式
        overflow: TextOverflow.ellipsis,
       
        //字体样式
        style: TextStyle(
          // 是否有下划线
          decoration: TextDecoration.none,
          // 下划线颜色
          decorationColor: Colors.blue,
          // 词间距
          wordSpacing: 2,
          // 字间距
          letterSpacing: 2,
          //字体大小
          fontSize: 20 ,
          // 是否倾斜
          fontStyle: FontStyle.italic,
          // 字体粗细
          fontWeight:FontWeight.w200,
          // 字体颜色
          color:Colors.blue,
        ),
        ),
      )