Flutter第十节-----Flutter布局与组件全解析

目录

一.线性布局-Column

二.线性布局-Row

​编辑​编辑三.流式分布-Wrap

四.层叠布局-Stack/Positioned

五.Text文本组件

六.Image图片组件

七.文本输入组件-TextField

---

一.线性布局-Column

width:double.infinity,//正无穷大
height:double.infinity,//正无穷大
/color:Colors.amber,
/padding:EdgeInsets.all(20),
decoration:BoxDecoration(color:Colors.amber),
child:Column(
//mainAxisAlignment:MainAxisAlignment,spaceBetween,/两头对齐
/mainAxisALignment:MainAxisAlignment.spaceAround,/环绕模式
/mainAxisAlignment:MainAxisAlignment.spaceEvenly,/均分模式
//mainAxisAlignment:MainAxisAlignment.start,/从头排列
/mainAxisAlignment:MainAxisAlignment.end,//从尾部排列
mainAxisAlignment:MainAxisALignment.center,//居中排列
children:[
Container(
width:100,
height:100,
color:口Colors.bLue,
),//Container
Container(
margin:EdgeInsets.only(top:10),
width:100,
height:100,
color:口Colors.bLue,
),//Container
Container(
margin:EdgeInsets.only(top:10),
width:100,
height:100,
color:口Colors.bLue,
),//Container

二.线性布局-Row

●作用：用于水平排列其子组件的核心布局容器

三.流式分布-Wrap

●作用：流式布局组件，当子组件在主轴方向上排列不下时，它会自动换行（或换列）

四.层叠布局-Stack/Positioned

●作用：层叠布局组件，允许你将多个子组件按照Z轴（深度方向）进行叠加排列。

●搭档：Positioned组件是Stack的黄金搭档，对子组件进行精确定位控制。Positioned必须作为Stack的直接子组件。

Positioned通过left、right、top、bottom来将子组件"钉"在Stack的某个角落或边缘

●适用场景：几乎在叠加效果的界面中都能看到它的身影

叠加效果：图像上的水印、文本、徽章。

浮层交互：如模态对话框、提示弹窗、操作菜单。

悬浮按钮：按钮悬浮在特定内容之上

五.Text文本组件

作用：在用户界面中显示文本的基础组件

六.Image图片组件

●作用：在用户界面中显示图片的核心部件

●图片分类：

●

注意：Android./HarmonyOS/iOS使用Image.network需要配置网络权限，

七.文本输入组件-TextField

登录框代码示例：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MainPage());
}

class MainPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MainPageState();
  }
}

class _MainPageState extends State<MainPage> {
  TextEditingController _phoneController = TextEditingController();
  TextEditingController _codeController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "Flutter组件的初体验",
      home: Scaffold(
        appBar: AppBar(title: Text("头部区域"), centerTitle: true),
        body: Container(
          padding: EdgeInsets.all(20),
          color: Colors.white,
          child: Column(
            children: [
              TextField(
                controller: _phoneController,
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.only(left: 20),
                  hintText: "请输入账号:",
                  fillColor: const Color.fromARGB(255, 222, 219, 207),
                  filled: true,
                  border: OutlineInputBorder(
                    borderSide: BorderSide.none,
                    borderRadius: BorderRadius.circular(25),
                  ),
                ),
              ),
              SizedBox(height: 20),
              TextField(
                controller: _codeController,
                obscureText: true,
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.only(left: 20),
                  hintText: "请输入密码:",
                  fillColor: const Color.fromARGB(255, 222, 219, 207),
                  filled: true,
                  border: OutlineInputBorder(
                    borderSide: BorderSide.none,
                    borderRadius: BorderRadius.circular(25),
                  ),
                ),
              ),
              SizedBox(height: 20),
              Container(
                height: 50,
                width: double.infinity,
                decoration: BoxDecoration(
                  color: Colors.black,
                  borderRadius: BorderRadius.circular(25),
                ),
                child: TextButton(
                  onPressed: () {
                    print("登录-${_codeController.text}");
                  },
                  child: Text("登录", style: TextStyle(color: Colors.white)),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}