10Flutter页面布局 Padding Row Column Expanded组件详解：

傷城~ 2023-08-17 15:58 73阅读 0赞

Padding组件：

main.dart

![1057166-20190902155239081-357025468.jpg][]

import 'package:flutter/material.dart';
    import 'res/listData.dart';
    /*
      flutter页面布局Padding Row Column Expanded组件详情：
    */
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text('Padding Row Column Expanded'),
            ),
            body: HomeContent(),
          ),
        );
      }
    }
    
    class HomeContent extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Padding(
          padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
          child: GridView.count(
            crossAxisCount: 2,
            childAspectRatio: 1.7,
            children: <Widget>[
              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),
              )
            ],
          ),
        );
      }
    }

Row水平布局组件：

![1057166-20190902161642941-466244361.jpg][]

import 'package:flutter/material.dart';
    import 'res/listData.dart';
    /*
      flutter页面布局Padding Row Column Expanded组件详情：
      Row水平布局组件：
      mainAxisAlignment 主轴的排序方式
      crossAxisAlignment 次轴的排序方式
      children 组件子元素：
    */
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text('Padding Row Column Expanded'),
            ),
            body: HomeContent(),
          ),
        );
      }
    }
    
    class HomeContent extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          height: 800.0,
          width: 400.0,
          color: Colors.pink,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              IconContainer(Icons.home, color: Colors.blue),
              IconContainer(Icons.search, color: Colors.orange),
              IconContainer(Icons.select_all, color: Colors.red)
            ],
          ),
        );
      }
    }
    
    class IconContainer extends StatelessWidget {
      double size = 32.0;
      Color color = Colors.red;
      IconData icon;
      IconContainer(this.icon, {
        this.color, this.size}) {}
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Container(
          height: 100.0,
          width: 100.0,
          color: this.color,
          child: Center(
            child: Icon(this.icon, size: this.size, color: Colors.white),
          ),
        );
      }
    }

Column 垂直布局：

![1057166-20190902162100172-1594875839.jpg][]

import 'package:flutter/material.dart';
    import 'res/listData.dart';
    /*
      flutter页面布局Padding Row Column Expanded组件详情：
      Column水平布局组件：
      mainAxisAlignment 主轴的排序方式
      crossAxisAlignment 次轴的排序方式
      children 组件子元素：
    */
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text('Padding Row Column Expanded'),
            ),
            body: HomeContent(),
          ),
        );
      }
    }
    
    class HomeContent extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          height: 800.0,
          width: 400.0,
          color: Colors.pink,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              IconContainer(Icons.home, color: Colors.blue),
              IconContainer(Icons.search, color: Colors.orange),
              IconContainer(Icons.select_all, color: Colors.red)
            ],
          ),
        );
      }
    }
    
    class IconContainer extends StatelessWidget {
      double size = 32.0;
      Color color = Colors.red;
      IconData icon;
      IconContainer(this.icon, {
        this.color, this.size}) {}
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Container(
          height: 100.0,
          width: 100.0,
          color: this.color,
          child: Center(
            child: Icon(this.icon, size: this.size, color: Colors.white),
          ),
        );
      }
    }

Expanded

![1057166-20190902163400488-115308225.jpg][]

import 'package:flutter/material.dart';
    import 'res/listData.dart';
    /*
      Flutter Expanded类似Web中的Flex布局：
      flex:元素占整个父Row/Column的比例：
      child 子元素
    
    */
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text('Padding Row Column Expanded'),
            ),
            body: HomeContent(),
          ),
        );
      }
    }
    
    class HomeContent extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Row(
          children: <Widget>[
            // Expanded(
            //   flex: 1,
            //   child: IconContainer(Icons.search,color:Colors.blue),
            // ),
            // Expanded(
            //   flex: 2,
            //   child: IconContainer(Icons.home,color:Colors.orange),
            // ),
            // Expanded(
            //   flex: 1,
            //   child: IconContainer(Icons.select_all,color:Colors.red),
            // )
    
            Expanded(
              flex: 1,
              child: IconContainer(Icons.home,color:Colors.orange),
            ),
            IconContainer(Icons.search,color:Colors.blue)
          ],
        );
      }
    }
    
    class IconContainer extends StatelessWidget {
      double size = 32.0;
      Color color = Colors.red;
      IconData icon;
      IconContainer(this.icon, {
         this.color, this.size}) {}
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Container(
          height: 100.0,
          width: 100.0,
          color: this.color,
          child: Center(
            child: Icon(this.icon, size: this.size, color: Colors.white),
          ),
        );
      }
    }

转载于:https://www.cnblogs.com/yiweiyihang/p/11447246.html

[1057166-20190902155239081-357025468.jpg]: /images/20230810/532aa5eab9bb44578e4e09744090b051.png
[1057166-20190902161642941-466244361.jpg]: /images/20230810/4e0373daf1194463ac4be0bdc14311ea.png
[1057166-20190902162100172-1594875839.jpg]: /images/20230810/7414695294ea4f4599d8b522bf770794.png
[1057166-20190902163400488-115308225.jpg]: /images/20230810/8f3a1f4ffc9d4f2c81ee83b746147712.png