我有 6 個帶有圖示和文本的小部件。我將圖示和文本放置在 Stack 小部件中，以便可以將圖示移動到文本中。但是我遇到了一個問題，如果你看一個狹窄的螢屏，那么文本將適合圖示，這是一個問題。如何使這個小部件靈活，如果螢屏很窄，那么文本不適合圖示？
Column(
children: [
Align(
alignment: Alignment.center,
child: Wrap(
alignment: WrapAlignment.center,
spacing: 10,
children: [
_mainWidget(
size,
constants.Assets.main,
'Lorem Ipsum is simply dummy text 3 h',
textStyleDescription,
leftText: 27,
),
_mainWidget(
size,
constants.Assets.main,
'Lorem Ipsum is simply dummy text 2 h',
textStyleDescription,
leftText: 27,
),
_mainWidget(
size,
constants.Assets.main,
'Lorem Ipsum is simply dummy 1 h',
textStyleDescription,
leftText: 27,
),
],
),
),
const SizedBox(height: 20),
],
),
Widget _mainWidget(
Size size, String assetName, String title, TextStyle titleStyle,
{double topText = 20, double leftText = 22, double widthText = 65}) =>
SizedBox(
width: 100,
height: 100,
child: Stack(
children: [
Positioned(
child: SvgPicture.asset(
assetName,
),
),
Positioned(
left: leftText,
top: topText,
child: SizedBox(
width: widthText,
child: Text(
title,
style: titleStyle,
textAlign: TextAlign.center,
),
),
)
],
),
);
我現在有
uj5u.com熱心網友回復：
您可以使用screen size設定您的width和：heightSizedBox
Widget _mainWidget(
Size size, String assetName, String title, TextStyle titleStyle,
{double topText = 20, double leftText = 22, double widthText = 65}){
var size = MediaQueryData.fromWindow(WidgetsBinding.instance.window).size;
return SizedBox(
width: size.width /6,
height: size.width /6,
...
);
}
你可以玩size.width /6得到適合你的東西。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/512895.html
標籤：扑镖