Flutter 通过 Column 实现垂直布局

最新推荐文章于 2024-05-12 22:19:21 发布

GetcharZp

最新推荐文章于 2024-05-12 22:19:21 发布

阅读量176

点赞数

本文链接：https://blog.csdn.net/qq_39042062/article/details/104026917

版权

效果图：

lib\main.dart 代码：

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Column'),
        ),
        body: Container(
          child: Column(
            children: <Widget>[
              Container(
                child: Text(
                  'Hello',
                  style: TextStyle(
                    fontSize: 20
                  ),
                ),
                padding: EdgeInsets.all(10),
              ),
              Divider(),
              Text('Column'),
              Divider(),
              Container(
                padding: EdgeInsets.all(10),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(10),
                  child: Image.network(
                    'https://img2018.cnblogs.com/i-beta/1383776/202001/1383776-20200117095609236-1518371407.png'
                  ),
                ),
              ),
              Divider(),
              Image.network('https://img2018.cnblogs.com/i-beta/1383776/202001/1383776-20200117095609236-1518371407.png'),
            ],
          ),
        )
      ),
    );
  }
}