Flutter 03 布局组件 GridView、Padding、Row、Column、Wrap、Stack、Align、Positioned、AspectRatio

已于 2023-11-01 13:46:56 修改
阅读量396 收藏 1
点赞数
分类专栏： flutter 文章标签： flutter
于 2023-11-01 01:04:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sziitjin/article/details/134151848
版权

一、GridView网格布局组件：

1、常用属性：

2、GridView.count 实现网格布局：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("GridView实现网格布局"),
        ),
        body: const HomePage(),
      ),
    );
  }
}

//GridView.count 实现网格布局
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      //GridView.count构造函数内部使用了SliverGridDelegateWithFixedCrossAxisCount，
      // 我们通过它可以快速的创建横轴固定数量子元素的GridView
      crossAxisCount: 4,
      childAspectRatio: 2.0,

      children: const <Widget>[
        Icon(Icons.home),
        Icon(Icons.ac_unit),
        Icon(Icons.search),
        Icon(Icons.settings),
        Icon(Icons.airport_shuttle),
        Icon(Icons.all_inclusive),
        Icon(Icons.beach_access),
        Icon(Icons.cake),
        Icon(Icons.circle),
      ],
    );
  }
}

3、GridView.extent实现网格布局：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("GridView实现网格布局"),
        ),
        body: const HomePage2(),
      ),
    );
  }
}

//GridView.extent实现网格布局
class HomePage2 extends StatelessWidget {
  const HomePage2({Key? key}) : super(key: key);

  //创建横轴子元素为固定最大长度的的GridView
  @override
  Widget build(BuildContext context) {
    return GridView.extent(
      maxCrossAxisExtent: 80.0,
      childAspectRatio: 1.0,
      children: const <Widget>[
        Icon(Icons.home),
        Icon(Icons.ac_unit),
        Icon(Icons.search),
        Icon(Icons.settings),
        Icon(Icons.airport_shuttle),
        Icon(Icons.all_inclusive),
        Icon(Icons.beach_access),
        Icon(Icons.cake),
        Icon(Icons.circle),
      ],
    );
  }
}

4、GridView.count 和 GridView.extent属性详解：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("GridView实现网格布局"),
        ),
        body: const HomePage3(),
      ),
    );
  }
}

//GridView.count 和 GridView.extent属性详解
class HomePage3 extends StatelessWidget {
  const HomePage3({Key? key}) : super(key: key);

  List<Widget> _getListData() {
    List<Widget> list = [];
    for (var i = 0; i < 20; i++) {
      list.add(Container(
        alignment: Alignment.center,
        color: Colors.blue,
        child: Text(
          '这是第$i条数据',
          style: const TextStyle(color: Colors.white, fontSize: 20),
        ),
// height: 400,  //设置高度没有反应
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisSpacing: 20.0,
      //水平子 Widget 之间间距
      mainAxisSpacing: 20.0,
      //垂直子 Widget 之间间距
      padding: const EdgeInsets.all(10),
      crossAxisCount: 2,
      //一行的 Widget 数量
      childAspectRatio: 0.8,
      //宽度和高度的比例
      children: _getListData(),
    );
  }
}

5、GridView实现动态列表

1）GridView.count 实现动态列表：

import 'package:flutter/material.dart';

import '../../res/listData.dart';


void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("GridView实现网格布局"),
        ),
        body: const HomePage(),
      ),
    );
  }
}

// GridView.count 实现动态列表
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  List<Widget> _getListData() {
    var tempList= listData.map((value){
      return Container(
        decoration: BoxDecoration(
            border: Border.all(
                color:const Color.fromRGBO(233, 233,233, 0.9),
                width: 1
            )
        ),
        child:Column(
          children: <Widget>[
            Image.asset(value['imageUrl']),
            const SizedBox(height: 12),
            Text(
              value['title'],
              textAlign: TextAlign.center,
              style:   const TextStyle(
                  fontSize: 20
              ),
            )
          ],
        ),

      );

    });
// ('xxx','xxx')
    return tempList.toList();
  }


  @override
  Widget build(BuildContext context) {
    return GridView.count(
        crossAxisSpacing:10.0 ,   //水平子 Widget 之间间距
        mainAxisSpacing: 10.0,    //垂直子 Widget 之间间距
        padding: const EdgeInsets.all(10),
      crossAxisCount: 2,  //一行的 Widget 数量
// childAspectRatio:0.7,  //宽度和高度的比例
      children: _getListData(),
    );
  }
}
2）GridView.builder实现动态列表 ：

import 'package:flutter/material.dart';
import '../../res/listData.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("FLutter App")),
        body: const HomePage(),
      ),
    );
  }
}

// GridView.builder实现动态列表
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  Widget _getListData(context, index) {
    return Container(
      decoration: BoxDecoration(
          border: Border.all(
              color: const Color.fromRGBO(233, 233, 233, 0.9), width: 1)),
      child: Column(
        children: <Widget>[
          Image.asset(listData[index]['imageUrl']),
          const SizedBox(height: 12),
          Text(
            listData[index]['title'],
            textAlign: TextAlign.center,
            style: const TextStyle(fontSize: 20),
          )
        ],
      ),
// height: 400,  //设置高度没有反应
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      //注意
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisSpacing: 10.0, //水平子 Widget 之间间距
        mainAxisSpacing: 10.0, //垂直子 Widget 之间间距
        crossAxisCount: 2, //一行的 Widget 数量
      ),
      itemCount: listData.length,
      itemBuilder: _getListData,
    );
  }
}

二、Padding组件：

1、效果： 

 

import 'package:flutter/material.dart';
import '../../res/listData.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("FLutter App")),
        body: const HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GridView.count(
// padding: const EdgeInsets.all(10),
      crossAxisCount: 2,
      childAspectRatio: 1,
      children: [
        Padding(
          padding: const EdgeInsets.all(10),
          child: Image.asset('images/1.png', fit: BoxFit.cover),
        ),
        Padding(
          padding: const EdgeInsets.all(10),
          child: Image.asset('images/2.png', fit: BoxFit.cover),
        ),
        Padding(
          padding: const EdgeInsets.all(10),
          child: Image.asset('images/3.png', fit: BoxFit.cover),
        ),
        Padding(
          padding: const EdgeInsets.all(10),
          child: Image.asset('images/4.png', fit: BoxFit.cover),
        ),
        Padding(
          padding: const EdgeInsets.all(10),
          child: Image.asset('images/5.png', fit: BoxFit.cover),
        ),
        Padding(
          padding: const EdgeInsets.all(10),
          child: Image.asset('images/6.png', fit: BoxFit.cover),
        ),

      ],
    );
  }
}

 三、线性布局（Row和Column）

1、Row 水平布局组件

 


import 'package:flutter/material.dart';
import '../../res/listData.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("FLutter App")),
        body: const HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      //最大宽高,扩展到父组件宽高
      height: double.infinity,
      width: double.infinity,
      color: Colors.black26,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          IconContainer(Icons.home, color: Colors.red),
          IconContainer(Icons.search, color: Colors.blue),
          IconContainer(Icons.send, color: Colors.orange),
          //注意：黄色区域表示子控件超出父控件的区域了，
          // 黄色区域只会在debug模式下存在，在release模式下，只有红色区域。
          IconContainer(Icons.send, color: Colors.orange),
        ],
      ),
    );
  }
}


class IconContainer extends StatelessWidget {
  Color color;
  double size;
  IconData icon;
  IconContainer(this.icon,
      {Key? key, this.color = Colors.red, this.size = 32.0})
      : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100.0,
      width: 100.0,
      color: color,
      child: Center(child: Icon(icon, size: size, color: Colors.white)), );
  }
}

2、Column 垂直布局组件

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter App")),
        body: const HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: double.infinity,
      width: double.infinity,
      color: Colors.black26,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          IconContainer(Icons.home, color: Colors.red),
          IconContainer(Icons.search, color: Colors.blue),
          IconContainer(Icons.send, color: Colors.orange),
        ],
      ),
    );
  }
}

class IconContainer extends StatelessWidget {
  Color color;
  double size;
  IconData icon;

  IconContainer(this.icon,
      {Key? key, this.color = Colors.red, this.size = 32.0})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100.0,
      width: 100.0,
      color: color,
      child: Center(child: Icon(icon, size: size, color: Colors.white)),
    );
  }
}

 3、double. infinity 和 double.maxFinite

1）让Container铺满整个屏幕：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter App")),
        body: const HomePage(),
      ),
    );
  }
}


class IconContainer extends StatelessWidget {
  Color color;
  double size;
  IconData icon;

  IconContainer(this.icon,
      {Key? key, this.color = Colors.red, this.size = 32.0})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100.0,
      width: 100.0,
      color: color,
      child: Center(child: Icon(icon, size: size, color: Colors.white)),
    );
  }
}


class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
        height: double.maxFinite,
        width: double.infinity,
        color: Colors.black26,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            IconContainer(Icons.home, color: Colors.red),
            IconContainer(Icons.search, color: Colors.blue),
            IconContainer(Icons.send, color: Colors.orange),
          ],
        ),
    );
  }
}
2）让Container的宽度和高度等于父元素的宽度高度：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter App")),
        body: const HomePage(),
      ),
    );
  }
}


class IconContainer extends StatelessWidget {
  Color color;
  double size;
  IconData icon;

  IconContainer(this.icon,
      {Key? key, this.color = Colors.red, this.size = 32.0})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100.0,
      width: 100.0,
      color: color,
      child: Center(child: Icon(icon, size: size, color: Colors.white)),
    );
  }
}


class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 400,
      width: 600,
      color: Colors.red,
      child: Container(
        height: double.maxFinite,
        width: double.infinity,
        color: Colors.black26,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            IconContainer(Icons.home, color: Colors.red),
            IconContainer(Icons.search, color: Colors.blue),
            IconContainer(Icons.send, color: Colors.orange),
          ],
        ),
      ),
    );
  }
}

4、弹性布局(Flex Expanded)

1）水平弹性布局：

demo1： 
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter App")),
        body: const HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Flex(
      direction: Axis.horizontal,
      children: [
        Expanded(flex: 2, child: IconContainer(Icons.home, color: Colors.red)),
        Expanded(
          flex: 1,
          child: IconContainer(Icons.search, color: Colors.orange),
        )
      ],
    );
  }
}

class IconContainer extends StatelessWidget {
  Color color;
  double size;
  IconData icon;

  IconContainer(this.icon,
      {Key? key, this.color = Colors.red, this.size = 32.0})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100.0,
      width: 100.0,
      color: color,
      child: Center(child: Icon(icon, size: size, color: Colors.white)),
    );
  }
}
demo2： 
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter App")),
        body: const HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(flex: 2, child: IconContainer(Icons.home, color: Colors.red)),
        Expanded(
          flex: 1,
          child: IconContainer(Icons.search, color: Colors.orange),
        )
      ],
    );
  }
}

class IconContainer extends StatelessWidget {
  Color color;
  double size;
  IconData icon;

  IconContainer(this.icon,
      {Key? key, this.color = Colors.red, this.size = 32.0})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100.0,
      width: 100.0,
      color: color,
      child: Center(child: Icon(icon, size: size, color: Colors.white)),
    );
  }
}
2）垂直弹性布局：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter App")),
        body: const HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(flex: 2, child: IconContainer(Icons.home, color: Colors.red)),
        Expanded(
          flex: 1,
          child: IconContainer(Icons.search, color: Colors.orange),
        )
      ],
    );
  }
}

class IconContainer extends StatelessWidget {
  Color color;
  double size;
  IconData icon;

  IconContainer(this.icon,
      {Key? key, this.color = Colors.red, this.size = 32.0})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100.0,
      width: 100.0,
      color: color,
      child: Center(child: Icon(icon, size: size, color: Colors.white)),
    );
  }
}

5、使用 Row或Column 结合Expanded实现

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter App")),
        body: const HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Container(
          width: double.infinity,
          height: 200,
          color: Colors.black,
        ),
        const SizedBox(height: 10),
        Row(
          children: [
            Expanded(
              flex: 2,
              child: SizedBox(
                height: 180,
                child: Image.asset(
                    "images/2.png",
                    fit: BoxFit.cover),
              ),
            ),
            const SizedBox(width: 10),
            Expanded(
                flex: 1,
                child: SizedBox(
                  height: 180,
                  child: Column(
                    children: [
                      Expanded(
                        flex: 1,
                        child: SizedBox(
                          width: double.infinity,
                          child: Image.asset(
                              "images/3.png",
                              fit: BoxFit.cover
                          ),
                        ),
                      ),
                      const SizedBox(height: 10),
                      Expanded(
                        flex: 2,
                        child: SizedBox(
                          width: double.infinity,
                          child: Image.asset(
                              "images/4.png",
                              fit: BoxFit.cover
                          ),
                        ),
                      )
                    ],
                  ),
                ))
          ],
        )
      ],
    );
  }
}

四、Wrap组件

 1、实现效果：


import 'package:flutter/material.dart';
import '../../res/listData.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("FLutter App")),
        body: const LayoutDemo(),
      ),
    );
  }
}

class LayoutDemo extends StatelessWidget {
  const LayoutDemo({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Padding(
        padding:const EdgeInsets.all(3),
    child: Wrap(
    spacing: 5,
    runSpacing: 5,
// direction: Axis.vertical,
// alignment:WrapAlignment.start,
// runAlignment: WrapAlignment.center,
    children: <Widget>[
    Button("第1集", onPressed: () {}),
    Button("第2集", onPressed: () {}),
    Button("第3集", onPressed: () {}),
    Button("第4集", onPressed: () {}),
    Button("第5集", onPressed: () {}),
    Button("第6集", onPressed: () {}),
    Button("第7集", onPressed: () {}),
    Button("第8集", onPressed: () {}),
    Button("第9集", onPressed: () {}),
    Button("第10集", onPressed: () {}),
    Button("第11集", onPressed: () {}),
    Button("第12集", onPressed: () {}),
    Button("第13集", onPressed: () {}),
    Button("第14集", onPressed: () {}),
    Button("第15集", onPressed: () {}),
    Button("第16集", onPressed: () {}),
    Button("第17集", onPressed: () {}),
    Button("第18集", onPressed: () {}),

    ],
    ),
    );
  }
}

class Button extends StatelessWidget {
  String text;
  void Function()? onPressed;

  Button(this.text, {Key? key, required this.onPressed}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      style: ButtonStyle(
        backgroundColor:
        MaterialStateProperty.all(const Color.fromARGB(255, 236, 233, 233)), foregroundColor: MaterialStateProperty.all(Colors.black45),
      ),
      child: Text(text),
    );
  }
}

 2、实现效果：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter App")),
        body: const LayoutDemo(),
      ),
    );
  }
}

class LayoutDemo extends StatelessWidget {
  const LayoutDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10),
      child: ListView(children: [
        Row(
          children: [
            Text(
              "热搜",
              style: Theme.of(context).textTheme.headline6,
            )
          ],
        ),
        const Divider(),
        Wrap(
          spacing: 10,
          runSpacing: 12,
          children: [
            Button("女装", onPressed: () {}),
            Button("笔记本", onPressed: () {}),
            Button("玩具", onPressed: () {}),
            Button("文学", onPressed: () {}),
            Button("女装", onPressed: () {}),
            Button("时尚", onPressed: () {}),
            Button("女装", onPressed: () {}),
            Button("女装", onPressed: () {}),
          ],
        ),
        const SizedBox(height: 10),
        Row(
          children: [
            Text(
              "历史记录",
              style: Theme.of(context).textTheme.headline6,
            )
          ],
        ),
        const Divider(),
        Column(
          children: const [
            ListTile(
              title: Text("女装"),
            ),
            Divider(),
            ListTile(
              title: Text("时尚"),
            ),
            Divider(),
          ],
        ),
        const SizedBox(height: 40),
        Padding(
          padding: const EdgeInsets.all(20),
          child: OutlinedButton.icon(
              onPressed: () {},
              style: ButtonStyle(
                  foregroundColor: MaterialStateProperty.all(Colors.black38)),
              icon: const Icon(Icons.delete),
              label: const Text("清空历史记录")),
        )
      ]),
    );
  }
}

class Button extends StatelessWidget {
  String text;
  void Function()? onPressed;

  Button(this.text, {Key? key, required this.onPressed}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      style: ButtonStyle(
        backgroundColor:
            MaterialStateProperty.all(const Color.fromARGB(255, 236, 233, 233)),
        foregroundColor: MaterialStateProperty.all(Colors.black45),
      ),
      child: Text(text),
    );
  }
}

五、层叠布局（Stack、 Align、Positioned)

1、Stack组件

 

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter App")),
        body: const HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Stack(
        alignment: Alignment.topLeft,
        children: [
          Container(
            height: 400,
            width: 300,
            color: Colors.red,
          ),
          const Text(
            "这是一个文本",
            style: TextStyle(fontSize: 40, color: Colors.amber),
          )
        ],
      ),
    );
  }
}

2、Stack Align

demo1：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter App")),
        body: const HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 120.0,
      width: 120.0,
      color: Colors.blue.shade50,
      child: const Align(
        alignment: Alignment.topRight,
        child: FlutterLogo(
          size: 60,
        ),
      ),
    );
  }
}
demo2： 

 

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter App")),
        body: const HomePage2(),
      ),
    );
  }
}

//Align结合Alignment 参数
class HomePage2 extends StatelessWidget {
  const HomePage2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
        height: 120.0,
        width: 120.0,
        color: Colors.blue.shade50,
        child: const Align(
          alignment: Alignment(2, 0.0),
          child: FlutterLogo(
            size: 60,
          ),
        ));
  }
}
demo3：  

 

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter App")),
        body: const HomePage3(),
      ),
    );
  }
}

//Align结合Stack组件
class HomePage3 extends StatelessWidget {
  const HomePage3({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 400,
        width: 300,
        color: Colors.red,
        child: Stack(
        // alignment: Alignment.center,
          children: const <Widget>[
            Align(
              alignment: Alignment(1, -0.2),
              child: Icon(Icons.home, size: 40, color: Colors.white),
            ),
            Align(
              alignment: Alignment.center,
              child: Icon(Icons.search, size: 30, color: Colors.white),
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: Icon(Icons.settings_applications,
                  size: 30, color: Colors.white),
            )
          ],
        ),
      ),
    );
  }
}

3、Stack Positioned

demo1：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter App")),
        body: const HomePage(),
      ),
    );
  }
}

//Stack组件中结合Positioned组件也可以控制每个子元素的显示位置
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // FlutterMediaQuery获取屏幕宽度和高度
    final size = MediaQuery.of(context).size;
    final width = size.width;
    final height = size.height;

    return Center(
      child: Container(
        height: height,
        width: width,
        color: Colors.red,
        child: Stack(
// alignment: Alignment.center,
          children: const <Widget>[
            Positioned(
              left: 10,
              child: Icon(Icons.home, size: 40, color: Colors.white),
            ),
            Positioned(
              bottom: 0,
              left: 100,
              child: Icon(Icons.search, size: 30, color: Colors.white),
            ),
            Positioned(
              right: 0,
              child: Icon(Icons.settings_applications,
                  size: 30, color: Colors.white),
            )
          ],
        ),
      ),
    );
  }
}
 demo2：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter App")),
        body: const HomePage2(),
      ),
    );
  }
}


// Flutter Stack Positioned固定导航案例
class HomePage2 extends StatelessWidget {
  const HomePage2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;

    return Stack(
      children: [
        ListView(
          padding: const EdgeInsets.only(top: 45),
          children: const [
            ListTile(
              title: Text("这是一个标题1 "),
            ),
            ListTile(
              title: Text("这是一个标题2"),
            ),
            ListTile(
              title: Text("这是一个标题"),
            ),
            ListTile(
              title: Text("这是一个标题"),
            ),
            ListTile(
              title: Text("这是一个标题"),
            ),
            ListTile(
              title: Text("这是一个标题"),
            ),
            ListTile(
              title: Text("这是一个标题"),
            ),
            ListTile(
              title: Text("这是一个标题"),
            ),
            ListTile(
              title: Text("这是一个标题"),
            ),
            ListTile(
              title: Text("这是一个标题"),
            ),
            ListTile(
              title: Text("这是一个标题"),
            ),
            ListTile(
              title: Text("这是一个标题"),
            ),
            ListTile(
              title: Text("这是一个标题"),
            ),
            ListTile(
              title: Text("这是一个标题"),
            ),
            ListTile(
              title: Text("这是一个标题"),
            ),
            ListTile(
              title: Text("这是一个标题"),
            ),
            ListTile(
              title: Text("这是一个标题"),
            ),
            ListTile(
              title: Text("这是一个标题"),
            ),
            ListTile(
              title: Text("这是一个标题"),
            ),
            ListTile(
              title: Text("这是一个标题"),
            ),
            ListTile(
              title: Text("这是一个标题"),
            ),
            ListTile(
              title: Text("这是一个标题"),
            ),
            ListTile(
              title: Text("这是一个标题"),
            ),
          ],
        ),
        Positioned(
            top: 0,
            left: 0,
            height: 40,
            width: size.width,
            child: Container(
              alignment: Alignment.center,
              color: Colors.black,
              child: const Text(
                "你好FLutter",
                style: TextStyle(color: Colors.white),
              ),
            ))
      ],
    );
  }
}

六、AspectRatio子控件宽高比

 1、实现效果： 

 

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

//Flutter AspectRatio
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter App")),
        body: const HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
// TODO: implement build
    return Container(

      width: 300,
      color: Colors.yellow,
      child: AspectRatio(
        aspectRatio: 5/1,
        // child: Container(
        //   color: Colors.red,
        // ),
        child: LayoutDemo(),
      ),

    );
  }
}
class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
// TODO: implement build
    return AspectRatio(
      aspectRatio: 2/1,
      child: Container(
        color: Colors.amberAccent,
      ),
    );
  }
}

sziitjin
关注
专栏目录
flutter组件分类
Bidding
08-07 890
使用场景：获取组件大小和相对于屏幕的坐标获取组件相对于某个父组件的坐标延伸：Flutter 的build 和 layout 是可以交错执行的，并不是严格的按照先 build 再 layout 的顺序。Sliver布局协议Viewport将当前布局和配置信息通过SliverConstraints传递给SliverSliver 确定自身的位置、绘制等信息，保存在 geometry 中（一个 SliverGeometry 类型的对象）
Flutter Layout之创建自适应应用程序
小王的技术库
03-20 834
要设置自定义视觉密度，请将密度注入您的`MaterialApp`主题) 这在Flutter中不直接支持，但您可以使用该`bits_dojo`包来禁用本机标题栏，并且您自己的标题栏替换它们DraggableDragTarget。
Flutter GridView网格布局
10-05
GridView 是一个网格布局的列组件。GridView 继承至 CustomScrollView，有 CustomScrollView 的特性。
flutter 网格布局
weixin_44911775的博客
03-25 1028
参考 const SONGNAME = [ '音乐1', '音乐2', '音乐3', '音乐3', '音乐4', '音乐5', '音乐6', '音乐7', '音乐8', '音乐9', '音乐10', '音乐11', '音乐12', '音乐13' ]; //更多为你推荐的列表方法体 Widget Servic
flutter中的Wrap
最新发布
KQe397773106的博客
08-11 406
Wrap可以通过使用不同的direction来替换Row或者Column，我们在组件可能会超出范围的时候，就可以考虑使用Wrap了。本文的例子：https://github.com/ddean2009/learn-flutter.git。
flutter 网格布局Gridview
qq_45317844的博客
11-19 1449
可以创建网格列表视图；主要通过Count、extent、custom、builder构造列表。有内边距、是否反向、滑动控制器等属性。四个属性使用场景，Count、extent、custom适用于子布局较少时使用。可能会用到上拉刷新，数据较多时，则使用builder属性,其中count和builder使用较多。
Flutter学习之旅 -网格布局
yasinawolaopo的博客
05-05 1412
flutter网格布局，经常使用的布局
【Flutter】入门09-Grid网格布局
夜雨Gecer的博客
02-01 1198
使用GridView.count创建(按照数量限制交叉轴显示个数) import 'package:flutter/material.dart'; import 'dart:math'; void main() { runApp(App()); } class App extends StatelessWidget { @override Widget build(Buil...
Flutter中的页面布局属性
wangzunkuan的博客
10-29 457
概述 本文主要对flutter中的常用的页面布局进行说明，首先说一下基本的布局及装饰组件说明： 组件名称 中文释义 说明 Align 对齐布局 指定child的对齐方式 AspectRatio 调整宽高比 根据设置的宽高比调整child组件 BaseLine 基准线布局 所有的child底部所在的同一水平线 Center 居中布局 child处于水平和垂直方向的中间位置...
Flutter基础
piziliul的博客
03-23 2497
Fluter基础 Flutter环境搭建 Android Studio开发环境搭建 Flutter目录结构,入口函数以及基础组件 目录结构 文件夹 作用 android android 平台相关代码 ios ios 平台相关代码 lib flutter 相关代码，我们主要编写的代 码就在这个文件夹 test 用于存放测试代码 pubspec.yaml 配置文件，一般存放一些第三方库的依 赖。 入口函数 void main
Flutter控件
chenyiluo94的博客
06-22 1091
2.图片 （1）Icon:系统自带图标 （2）本地图片 Image.asset() AssetImage （3）网络图片 Image.network() NetworkImage （4）Alignment设置图片位置 （5）BoxFit设置大小和图片不吻合时 3.按钮(xxButton) （1）普通按钮 常用的普通按钮：常用属性: （2）下拉菜单按钮 DropdownButtonFloatingActionButtonFloatActionButton
flutter_layout_grid:Flutter的基于网格的布局系统，灵感来自CSS网格布局
04-08
颤振布局网格 Flutter的功能强大的网格布局系统，针对复杂的用户界面设计进行了优化。 点击图片查看其代码 :sparkles: 特色： :sparkles: :triangular_ruler: 固定，灵活和内容大小的行和列（ ） :backhand_index_pointing_down: 精确控制项目的放置，包括跨越行，列和重叠项目的能力（ ） :speech_balloon: 命名网格区域以描述孩子的位置（ ） :mechanical_arm: 一种可配置的自动网格项放置算法，能够在行和列之间进行稀疏密集的打包（ ） :END_arrow: 从右到左的支撑，由环境Directionality或配置驱动 :wheelchair_symbol: 辅助功能注意事项（这是您作为前端开发人员的责任，因此请阅读并学习相关技术） :shorts: 描述性和简短布局代码的扩展方法和辅助函数 :bug: 调试辅助工具，包括小部件属性列表，Debug Painting和子溢出的视觉指示 受出色的规范的启发（并在很大程度上基于）。 入门 该库中使用的所有术语都与CS
【Flutter】GridView 网格布局.zip
08-27
【Flutter】GridView 网格布局 ( GridView.count 构造函数 | crossAxisCount 参数指定每行元素个数 ) https://hanshuliang.blog.csdn.net/article/details/119940970 博客源码快照
Flutter中使用griderview实现网格布局
flutterer的博客
06-25 681
在iOS中我们经常用到UICollectionView来实现网格布局,其实在Flutter中也有对应的组件,而且用起来要比UICollectionView容易,那就是GridView 如下代码,实现网格布局的基本格式: class _OtherPageState extends State { @override Widget build(BuildContext context) { return Container( child: GridView.builder( scrollDirec
Flutter利用GridView创建网格布局实现优美布局
江上清风山间明月的博客
11-07 1554
GridView 是 Flutter 中用于创建网格布局的强大小部件。它允许你在行和列中排列子小部件，非常适合显示大量项目，例如图像、文本、卡片等。GridView 持许多其他配置选项，如滚动方向、内容填充、滚动控制等。你可以根据你的应用需求进行进一步的定制。总的来说，GridView 是一个非常灵活且强大的小部件，可用于创建各种网格布局。结束语Flutter是一个由Google开发的开源UI工具包，它可以让您在不同平台上创建高质量、美观的应用程序，而无需编写大量平台特定的代码。
【Flutter】列表组件ListView&网格布局组件GridView&Padding组件
一以贯之的努力 不得懈怠的人生
05-24 1349
介绍了列表组件ListView、网格布局组件GridView以及Padding组件的使用。
Flutter实现网格布局2
weixin_45425105的博客
12-03 377
效果图： 实现代码： import 'package:flutter/material.dart'; class GridPage extends StatelessWidget { Widget centreSection() { return Container( height: 200, child: GridView( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
【Flutter入门到进阶】Flutter基础篇---布局
Yvan
03-01 2785
GridView网格布局在实际项目中用的也是非常多的，当我们想让可以滚动的元素使用矩阵方式排列的时 候。此时我们可以用网格列表组件GridView实现布局GridView创建网格列表主要有下面三种方式1、可以通过GridView.count 实现网格布局2、可以通过GridView.extent 实现网格布局3、通过GridView.builder实现动态网格布局。
Flutter开发必备：常用布局组件Row与Column解析
"这篇资源主要介绍了Flutter开发中常用的布局组件，包括Row、Column以及Expanded，并提供了相关构造函数的参数说明。" 在Flutter中，布局组件是构建用户界面的基础，它们帮助开发者有效地组织和排列控件。以下是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sziitjin

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值