Flutter(Widget) - 布局组件

作者: aofeilin | 来源:发表于2022-07-12 12:46 被阅读0次

Flutter技术分享
Flutter(Widget) - 布局组件
Flutter学习笔记21-可滚动组件
Flutter-布局
Flutter 基础布局 Stack Widget
Flutter及Dart入门
[Flutter] 10-Flutter的生命周期
Flutter入门之Row、Column、Container布局
Flutter 布局控件技术文章（转）
Flutter 页面生命周期

Padding, Row ,Column,Expanded ,flex
Stack align position Card Wrap

截屏2022-07-14 09.54.29.png

1.Padding:内边距

截屏2022-07-08 16.49.01.png

class ZflPaddingWidget extends StatefulWidget {
  @override
  _ZflState createState() => _ZflState();
}

class _ZflState extends State<ZflPaddingWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Container(
        padding: EdgeInsets.only(right: 10),
        child: GridView.count(crossAxisCount: 4,
          childAspectRatio: 1.7,
          children: [
            Padding(padding: EdgeInsets.fromLTRB(10, 10, 0, 0),child:
              Image.network('https://www.itying.com/images/flutter/1.png',fit: BoxFit.cover)),
            Padding(padding: EdgeInsets.fromLTRB(10, 10, 0, 0),child:
            Image.network('https://www.itying.com/images/flutter/1.png',fit: BoxFit.cover)),
            Padding(padding: EdgeInsets.fromLTRB(10, 10, 0, 0),child:
            Image.network('https://www.itying.com/images/flutter/1.png',fit: BoxFit.cover)),
            Padding(padding: EdgeInsets.fromLTRB(10, 10, 0, 0),child:
            Image.network('https://www.itying.com/images/flutter/1.png',fit: BoxFit.cover)),
            Padding(padding: EdgeInsets.fromLTRB(10, 10, 0, 0),child:
            Image.network('https://www.itying.com/images/flutter/1.png',fit: BoxFit.cover)),
            Padding(padding: EdgeInsets.fromLTRB(10, 10, 0, 0),child:
            Image.network('https://www.itying.com/images/flutter/1.png',fit: BoxFit.cover)),
          ],
        ),
      ),
    );
  }
}

2.Row:

截屏2022-07-12 12.23.09.png

import 'package:flutter/material.dart';
import 'package:flutter_app/padding_row_column_expand/zfl_cell.dart';

class ZFLRowCellWidget extends StatefulWidget {
  @override
  _ZFLRowCellWidgetState createState() => _ZFLRowCellWidgetState();
}

class _ZFLRowCellWidgetState extends State<ZFLRowCellWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
//      width: 800,
//      height: 400,
      alignment: Alignment.center,
//      child: SingleChildScrollView(
//        scrollDirection: Axis.horizontal,和spaceEvenly冲突
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          ZFLCellTitleWidget(
            color: Colors.red,
            height: 100,
          ),
          ZFLCellTitleWidget(color: Colors.yellow, height: 100),
          ZFLCellTitleWidget(color: Colors.blue, height: 100),
        ],
      ),
//      ),
    );
  }
}

import 'package:flutter/material.dart';
class ZFLCellTitleWidget extends StatefulWidget {
  final Color color;
  final double height;

  const ZFLCellTitleWidget({Key key, this.color, this.height}) : super(key: key);
  @override
  _ZFLCellTitleWidgetState createState() => _ZFLCellTitleWidgetState();
}

class _ZFLCellTitleWidgetState extends State<ZFLCellTitleWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: this.widget.height,
      height: this.widget.height,
      color: this.widget.color,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(
            Icons.accessibility_outlined,
          ),
          Text('标题')
        ],
      ),
    );
  }
}

3.Column:

截屏2022-07-12 12.35.58.png

import 'package:flutter/material.dart';
import 'package:flutter_app/padding_row_column_expand/zfl_cell.dart';
/// @Description TODO
class ZFLColumnCellWidget extends StatefulWidget {
  @override
  _ZFLColumnCellWidgetState createState() => _ZFLColumnCellWidgetState();
}

class _ZFLColumnCellWidgetState extends State<ZFLColumnCellWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.topCenter,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          ZFLCellTitleWidget(),
          ZFLCellTitleWidget(),
          ZFLCellTitleWidget(),
          ZFLCellTitleWidget(),
          ZFLCellTitleWidget(),
        ],
      ),
    );
  }
}

4.Expanded flex

截屏2022-07-12 12.45.59.png

import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/padding_row_column_expand/zfl_cell.dart';
/// @Description TODO
class ZFLExpandingWidget extends StatefulWidget {
  @override
  _ZFLExpandingWidgetState createState() => _ZFLExpandingWidgetState();
}

class _ZFLExpandingWidgetState extends State<ZFLExpandingWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: MediaQueryData.fromWindow(window).padding.top),
      alignment: Alignment.topLeft,
      height: 200,
      child: Row(
        children: [
          Expanded(
              flex: 2,
              child: ZFLCellTitleWidget(
                color: Colors.blue,
              )),
          Expanded(
              flex: 1,
              child: Column(
                children: [
                  ZFLCellTitleWidget(color: Colors.yellow,height: 100,),
                  ZFLCellTitleWidget(color: Colors.orange,height: 100,),
                ],
              )
          )
        ],
      ),
    );
  }
}

5.Stack alignment Positioned

截屏2022-07-12 13.46.34.png

import 'dart:ui';
import 'package:flutter/material.dart';
class ZFLStackWidget1 extends StatefulWidget {
  @override
  _ZFLStackWidgetState createState() => _ZFLStackWidgetState();
}

class _ZFLStackWidgetState extends State<ZFLStackWidget1> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: MediaQueryData.fromWindow(window).padding.top),
      color: Colors.red,
      width: MediaQuery.of(context).size.width,
      height: 300,
      child: Stack(
        alignment: Alignment(1,0.3),
        children: [
          Align(
            alignment: Alignment(1, -0.2),
            child: Icon(Icons.home,size: 40,),
          ),
          Align(
            alignment: Alignment(1, 1),
            child: Icon(Icons.home,size: 40,),
          ),
          Align(
            alignment: Alignment(0, 0),
            child: Icon(Icons.home,size: 40,),
          ),
        ],
      ),
    );
  }
}

截屏2022-07-12 13.55.21.png

import 'dart:ui';

import 'package:flutter/material.dart';
class StackPositionWidget extends StatefulWidget {
  @override
  _StackPositionWidgetState createState() => _StackPositionWidgetState();
}

class _StackPositionWidgetState extends State<StackPositionWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: MediaQueryData.fromWindow(window).padding.top),
      width: MediaQuery.of(context).size.width,
      height: 400,
      color: Colors.red,
      child: Stack(
        children: [
          Positioned(
            bottom: 0,
              left: 10,
              child: Icon(
            Icons.account_box_outlined,
            size: 30,
          )),
          Positioned(
            right: 50,
              child: Icon(
            Icons.account_box_outlined,
            size: 30,
          )),
          Positioned(
            bottom: 0,
              left: 100,
              child: Icon(
            Icons.account_box_outlined,
            size: 30,
          )),
        ],
      ),
    );
  }
}

6.Card AspectRatio

截屏2022-07-12 17.06.19.png

import 'package:flutter/material.dart';

/// FileName zfl_card_page.dart
///
/// @Author zhangfanglin
/// @Date 7/12/22 4:52 PM
///
/// @Description TODO
///

class ZFLCardPage extends StatefulWidget {
  @override
  _ZFLCardPageState createState() => _ZFLCardPageState();
}

class _ZFLCardPageState extends State<ZFLCardPage> {
  @override
  Widget build(BuildContext context) {
    return listTitleImageWidget();
  }

  listTitleWidget() {
    return Container(
      child: ListView(
        children: [
          Card(
            child: Column(
              children: [
                ListTile(
                  title: Text(
                    '张三',
                    style: TextStyle(fontSize: 18),
                  ),
                  subtitle: Text('高级工程机'),
                ),
              ],
            ),
          ),
          Card(
            child: Column(
              children: [
                ListTile(
                  title: Text(
                    '张三',
                    style: TextStyle(fontSize: 18),
                  ),
                  subtitle: Text('高级工程机'),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

  listTitleImageWidget() {
    return Container(
      child: ListView(
        children: [
          Card(
            child: Column(
              children: [
                AspectRatio(
                  aspectRatio: 2 / 1,
                  child: Image.network(
                    'https://img0.baidu.com/it/u=1879498024,2089500398&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
                    fit: BoxFit.cover,
                  ),
                ),
                ListTile(
                  leading: ClipOval(
                    child: Image.network("https://www.itying.com/images/flutter/2.png",fit: BoxFit.cover,height:60,width: 60),
                  ),
                  title: Text(
                    '张三',
                    style: TextStyle(fontSize: 18),
                  ),
                  subtitle: Text('高级工程机高级工程机高级工程机高级工程机高级工程机高级工程机高级工程机高级工程机高级工程机高级工程机',overflow: TextOverflow.ellipsis,),
                ),
              ],
            ),
          ),
          Card(
            child: Column(
              children: [
                ListTile(
                  title: Text(
                    '张三',
                    style: TextStyle(fontSize: 18),
                  ),
                  subtitle: Text('高级工程机高级工程机高级工程机高级工程机高级工程机高级工程机高级工程机高级工程机高级工程机高级工程机',),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

7.Wrap:

截屏2022-07-13 15.00.37.png

import 'dart:ui';
import 'package:flutter/material.dart';
class ZFLWrapWidget extends StatefulWidget {
  @override
  _ZFLWrapWidgetState createState() => _ZFLWrapWidgetState();
}

class _ZFLWrapWidgetState extends State<ZFLWrapWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin:
          EdgeInsets.only(top: MediaQueryData.fromWindow(window).padding.top),
      child: Wrap(
        spacing: 10,
        runSpacing:10,
        children: [
          MyButton(
            title: 'title1title1title1title1',
          ),
          MyButton(
            title: 'title2',
          ),
          MyButton(
            title: 'title2',
          ),
          MyButton(
            title: 'title2',
          ),
          MyButton(
            title: 'title2',
          ),
          MyButton(
            title: 'title2',
          ),
          MyButton(
            title: 'title2',
          ),
          MyButton(
            title: 'title2title2title2title2title2',
          ),
          MyButton(
            title: 'title2title2title2title2',
          ),
          MyButton(
            title: 'title2',
          ),
        ],
      ),
    );
  }
}

class MyButton extends StatelessWidget {
  final String title;

  const MyButton({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 20,
//      color: Colors.lightGreenAccent,
      child: RaisedButton(
        onPressed:(){
        },
        color: Colors.yellow,//背景颜色
//        padding:EdgeInsets.zero,
        child: Text(
          this.title,
          textAlign: TextAlign.left,
          style: TextStyle(
            color: Colors.red
          ),
        ),
      ),
    );
  }
}

Flutter技术分享
一.布局 Flutter 里面有100多个控件，核心就是一切皆组件。 flutter常用的布局widget有Con...
Flutter(Widget) - 布局组件
Padding, Row ,Column,Expanded ,flexStack align position C...
Flutter学习笔记21-可滚动组件
Flutter提供了多种可滚动组件（Scrollable Widget）用于显示列表和长布局。可滚动组件都直接或间...
Flutter-布局
一、介绍 flutter布局需要先了解flutter所有布局的widget，首先flutter布局分为Contai...
Flutter 基础布局 Stack Widget
Flutter 基础布局 Stack Widget Stack Widget布局类似于Andr...
Flutter及Dart入门
目录 Dart语言下的Flutter Flutter Widget Flutter 布局 Flutter 页面路...
[Flutter] 10-Flutter的生命周期
本章介绍 Flutter 的组件，以及组件的生命周期。一、组件 Widget定义 Flutter 中的组件与前端...
Flutter入门之Row、Column、Container布局
在Flutter中线性布局结构的实现是通过两个不同的widget分别来实现横向和纵向布局结构的。组件Row用来实现...
Flutter 布局控件技术文章（转）
Flutter 布局控件完结篇 Flutter攻略 Widgets 目录-中文翻译 Flutter Widget ...
Flutter 页面生命周期
Flutter 页面生命周期就是 Flutter 页面组件 Widget 的生命周期。 Flutter 有两种组件...