布局原理区别:Flutter 中的布局是基于约束的,可以使用Constraints来控制小部件的最大和最小尺寸,并根据父级小部件的约束来确定自身的尺寸。uni-app则是,可以使用类似于 CSS 中 Flex 弹性布局的方式来控制组件的排列和布局。通过设置组件的样式属性,如 display: flex、flex、justify-content 等,可以实现垂直和水平方向上的灵活布局。当然flutter也有和flex差不多的row与column。
自定义布局:Flutter支持自定义布局,可以通过继承 SingleChildLayoutDelegate 或 MultiChildLayoutDelegate 来实现自定义布局,而uni-app目前并没有直接提供类似的专门用于自定义布局的机制,不过uni-app常见的做法是创建一个自定义组件,并在该组件的 template 中使用各种布局方式、样式和组件组合来实现特定的布局效果。
import 'package:flutter/material.dart'; // 堆代码 duidaima.com void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({super.key, required this.title}); final String title; @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ const Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.headlineMedium, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: const Icon(Icons.add), ), ); } }uniapp代码:
<template> <view class="container"> <text class="count">{{ count }}</text> <view class="buttons"> <button class="btn" @tap="incrementCounter">+</button> </view> </view> </template> <script> export default { data() { return { count: 0, }; }, methods: { incrementCounter() { this.count++; }, }, }; </script> <style> .container { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100vh; background-color: #f0f0f0; } .count { display: flex; justify-content: center; align-items: center; font-size: 48px; font-weight: bold; height: 100%; } .buttons { display: flex; width: 100vw; flex-direction: row; justify-content: flex-end; } .btn { width: 108rpx; height: 108rpx; font-size: 24px; display: flex; justify-content: center; align-items: center; margin: 8px; background-color: #2196F3; color: #fff; border-radius: 50%; } </style>