Flutter——Row組件(水平布局組件)


  • Row組件的常用屬性

屬性 說明
mainAxisAlignment 主軸的排序方式
crossAxisAlignment 次軸的排序方式
children 組件子元素

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: "RowWidget",
    home: MyApp(),
  ));
}


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: 400,
        height: 600,
        color: Colors.black45,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,  // 主軸元素的排序方式(水平布局中,X軸是主軸)
          crossAxisAlignment: CrossAxisAlignment.end,  // 次軸元素的排序方式
          children: <Widget>[
            Container(
              color: Colors.orange,
              width: 80,
              height: 80,
            ),
            Container(
              color: Colors.redAccent,
              width: 80,
              height: 80,
            ),
            Container(
              color: Colors.teal,
              width: 80,
              height: 80,
            )
          ],
        ),
      )
    );
  }
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM