【Flutter&Dart】构建布局(1/100)

构建布局

没什么好介绍的,练习构建而已;代码如下:

dart 复制代码
//绘制布局图

import 'package:flutter/material.dart';

class MyApp1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Widget titleSection = Container(
      padding: const EdgeInsets.all(32.0),
      child: Row(
        children: [
          Expanded(
              child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                padding: const EdgeInsets.only(bottom: 8.0),
                child: Text(
                  'Oeschinen Lake Campground',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
              ),
              Text(
                'Kandersteg, Switzerland',
                style: TextStyle(
                  color: Colors.grey[500],
                ),
              )
            ],
          )),
          Icon(
            Icons.star,
            color: Colors.red[500],
          ),
          Text('41'),
        ],
      ),
    );

    Column buildButtonColumn(IconData icon, String label) {
      Color color = Theme.of(context).primaryColor;

      return Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(
            icon,
            color: color,
          ),
          Container(
            margin: const EdgeInsets.only(top: 8.0),
            child: Text(
              label,
              style: TextStyle(
                  fontSize: 12.0, fontWeight: FontWeight.w400, color: color),
            ),
          )
        ],
      );
    }

    Widget buttonSection = Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          buildButtonColumn(Icons.call, 'CALL'),
          buildButtonColumn(Icons.near_me, 'ROUTE'),
          buildButtonColumn(Icons.share, 'SHARE'),
        ],
      ),
    );
    Widget textSection = Container(
      padding: const EdgeInsets.all(32.0),
      child: Text(
        '''
Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese Alps. Situated 1,578 meters above sea level, it is one of the larger Alpine Lakes. A gondola ride from Kandersteg, followed by a half-hour walk through pastures and pine forest, leads you to the lake, which warms to 20 degrees Celsius in the summer. Activities enjoyed here include rowing, and riding the summer toboggan run.
        ''',
        softWrap: true,
      ),
    );

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: ListView(
          children: [
            Image.asset(
              'images/smart_api.png',
              height: 240.0,
              fit: BoxFit.cover,
            ),
            titleSection,
            buttonSection,
            textSection,
          ],
        ),
      ),
    );
  }
}

main.dart 入口调用如下:

dart 复制代码
import 'w3c/MyApp1.dart';

void main() {
//MyApp1
  runApp(MyApp1());
  }

如果说还有啥,就是一点点配置了:

在 pubspec.yaml 里配置 assets images 资源图片

yaml 复制代码
# The following section is specific to Flutter packages.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    # - images/a_dot_burr.jpeg
    # - images/a_dot_ham.jpeg
    - images/smart_api.png

还有就是在工程根目录准备 images 图片文件夹存放图片,如下图:

============END

如果对老师您有点用,用您发财的金手指点个赞👍

另外宣传一下自研的 smartApi 开发工具,正在紧张的开发进行中。。。。敬请期待哦!

主要是市面上那些 Api 调试工具太难用了,稍微好用一点的又性能消耗巨大

相关推荐
API开发1 小时前
apiSQL+GoView:一个API接口开发数据大屏
前端·后端·api·数据可视化·数据大屏·apisql
周杰伦的稻香2 小时前
MySQL中的空间碎片率计算分析
android·数据库·mysql
zhifanxu2 小时前
Flutter开发学习汇总
flutter
用户093 小时前
MVI架构如何改变Android开发模式
android·面试·kotlin
梦终剧3 小时前
【Android之路】.sp和界面层次结构
android
2501_916008893 小时前
iOS 26 软件性能测试全流程,启动渲染资源压力对比与优化策略
android·macos·ios·小程序·uni-app·cocoa·iphone
zh_xuan3 小时前
Android Handler源码阅读
android
雪饼android之路4 小时前
【Android】 android suspend/resume总结(3)
android·linux
00后程序员张4 小时前
iOS 26 兼容测试实战,机型兼容、SwiftUI 兼容性改动
android·ios·小程序·uni-app·swiftui·cocoa·iphone