Middle
Որքա՞ն widget-ներ կան Flutter-ում, որոնք ապահովում են ադապտիվ դասավորություն։
sobes.tech AI
Պատասխան AI-ից
MediaQuery- ստանալու էկրանի չափի և ուղղության մասին տեղեկություններ:LayoutBuilder- կառուցելու տեսժետներ՝ կախված ծնողական տարրերի սահմանափակումներից:OrientationBuilder- կառուցելու տեսժետներ՝ կախված էկրանի ուղղությունից:FractionallySizedBox- ստեղծելու տարրեր՝ չափը համապատասխանելով հասանելի տարածքին:AspectRatio- պահելու համար նշված կողմերի հարաբերությունը:ExpandedևFlexible- ճկուն տարածք բաժանելու համարRowկամColumnներսում:SingleChildScrollView- պարունակության սքրոլինգ՝ եթե այն գերազանցում է մատչելի տարածքը:ListViewևGridView- ցուցակների և ցանցերի ցուցադրման համար՝ հնարավորությամբ հարմարեցնելու:ResponsiveBuilder(փաթեթիցresponsive_framework) - կառուցելու տեսժետներ՝ կախված բրեյքպոինտներից:FittedBox- երեխաների տեսժետը չափելու համար՝ համապատասխանելով ծնողի չափին:
// Օրինակ `MediaQuery` օգտագործման
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
final Size screenSize = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(
title: Text('Աдапտիվ դիզայն'),
),
body: Center(
child: Text('Էկրանին չափը: ${screenSize.width.toStringAsFixed(1)}x${screenSize.height.toStringAsFixed(1)}'),
),
);
}
}
// Օրինակ `LayoutBuilder` օգտագործման
class AdaptiveContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
if (constraints.maxWidth > 600) {
// Հասարակական լայն էկրան
return Container(
color: Colors.blue,
width: 300,
height: 100,
child: Center(child: Text('Լայն')),
);
} else {
// Թույլ էկրան
return Container(
color: Colors.red,
width: 100,
height: 50,
child: Center(child: Text('Թույլ')),
);
}
},
);
}
}
// Օրինակ `Expanded` օգտագործման
class FlexibleLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Container(
color: Colors.yellow,
width: 50,
height: 50,
),
Expanded( // կմիավորի մնացած տարածքը
child: Container(
color: Colors.green,
height: 50,
),
),
],
);
}
}