Flutter(Widget) - 布局组件

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

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(Widget) - 布局组件

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Flutter1