所以我正在模擬一個舊應用程式，我的用戶界面看起來像這樣
目前我專注于為紫色側邊欄創建 UI 布局，我通過創建一個紫色背景的容器來做到這一點。在容器中，我創建了一個包含多個子項的列，并且只使用了一個空的 SizedBox 來創建一個小部件與另一個小部件之間的距離。
import 'package:flutter/material.dart';
class SignInPage extends StatelessWidget {
const SignInPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
// appBar: AppBar(
// title: Text('Sample Text'),
// elevation: 5.0,
// ),
body: _buildContent(),
);
}
Widget _buildContent() {
// private method
return Container(
color: Colors.deepPurpleAccent,
padding: EdgeInsets.all(16.0),
child: Column(
// crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
color: Colors.orange,
child: SizedBox(
height: 100.0,
width: 80.0,
),
),
SizedBox(
height: 140.0,
),
Container(
color: Colors.red,
child: SizedBox(
height: 50.0,
width: 80.0,
),
),
SizedBox(
height: 8.0,
),
Container(
color: Colors.purple,
child: SizedBox(
height: 50.0,
width: 80.0,
),
),
],
),
);
}
}
我對顫動很陌生，所以我想知道是否有更好的方法來構建側欄的布局？還要考慮未來，既然“BagTrack”這個名字與“分析概述”處于同一水平，那應該只是一個巨大的行嗎？
uj5u.com熱心網友回復：
實際答案
方法一
@Mahfuzur Ra??hman的回答很好，但要真正回答您關于其他方式的問題。Flex小部件（Column和Row擴展Flex小部件），兩者都有mainAxisAlignment和crossAxisAlignment，它們可用于在不同的設備/螢屏尺寸之間更輕松地對齊它們。
因此，也許將您的紅色和紫色框分組到一Column組mainAxisSize中MainAxisSize.min，并將周圍的列與特定大小對齊。
https://api.flutter.dev/flutter/widgets/Column-class.html
方法二
另一種方式，如果您希望某個小部件從其父級占據一定百分比的空間，我建議您查看擴展小部件，靈活小部件。
方法三
或者甚至FractionallySizedBox對你來說可能是一個很好的小部件，但我也會看看這個LayoutBuilder小部件來解決潛在的無界高度/寬度例外。
第二個小問題
關于巨排的第二個問題完全由您決定。不過我不會這樣做。可能會使用const SizedBoxor const EdgeInsets(for Padding) 并以這種方式將它們保持在相同的高度。
只是補充 Flutter 知識
PS：因為你是 Flutter 的新手。作為對未來性能的建議：Container盡可能多地避免使用小部件，有很多更簡單的小部件，例如SizedBox, ColoredBox，DecoratedBox并且Padding您可以在其位置使用它們，有時可以標記為 const 并且更便宜。
為了理解final和const：
final是一個不能在代碼中意外重新分配的變數。當你實體化它時，你給它一個值，就是這樣。（使用late一點但不多的改變）；const是編譯器賦值的變數，如果你熟悉C就好#define了，但是有一點區別，每次你說const EdgeInsets.all(8)例如，編譯器都會檢測到并使用相同的變數，所以你不必記住一個特定的常量變數名。
uj5u.com熱心網友回復：
就在這里。但使用SizedBox也不會受傷。
我通常喜歡ListTile抽屜中的每個元素。
ListTile(
leading: GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {},
child: Container(
width: 48,
height: 48,
padding: const EdgeInsets.symmetric(vertical: 4.0),
alignment: Alignment.center,
child: const CircleAvatar(),
),
),
title: const Text('title'),
dense: false,
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/478084.html
上一篇：PythonScrapyWebScraping：在具有ajax內容的onclick元素中獲取URL的問題
下一篇：如何在kivy中切換螢屏？