स्क्रीन की चौड़ाई / ऊंचाई के प्रतिशत के लिए आकार देने वाले तत्व

Question

क्या स्क्रीन के आकार (चौड़ाई / ऊँचाई) के सापेक्ष किसी तत्व को आकार देने का एक सरल (गैर-लेआउटब्यूलर) तरीका है? उदाहरण के लिए: मैं कार्ड व्यू की चौड़ाई स्क्रीन की चौड़ाई का 65% कैसे सेट करूं।

यह buildविधि के अंदर नहीं किया जा सकता है (जाहिर है) इसलिए इसे पोस्ट निर्माण तक स्थगित करना होगा। क्या इस तरह से तर्क रखने के लिए एक पसंदीदा जगह है?

Comments

बस कह रही है, यह आम तौर पर अच्छा अभ्यास आईएमओ नहीं है, यह वेब डिजाइन सामान है एप्लिकेशन में आपको आम तौर पर आकारों को परिभाषित करने के लिए डिवाइस पिक्सल का उपयोग करना चाहिए, और अपने विजेट को इनसेट करने के लिए पैडिंग का उपयोग करना चाहिए, क्योंकि आपका पहलू अनुपात लगभग हमेशा एक ही होता है (टैबलेट्स को छोड़कर)।

— दिनांक

एक और 1.5 साल के बाद, ऐसा लगता है कि यह इतना बुरा विचार नहीं है। हर महीने नए फोन आ रहे हैं जिनमें वियर और वियर आस्पेक्ट रेशियो है।

— फरीद

Answer 1

FractionallySizedBoxउपयोगी भी हो सकता है। आप सीधे स्क्रीन की चौड़ाई भी पढ़ सकते हैं MediaQuery.of(context).sizeऔर उसके आधार पर एक आकार बॉक्स बना सकते हैं

MediaQuery.of(context).size.width * 0.65

यदि आप वास्तव में स्क्रीन के एक हिस्से के रूप में आकार देना चाहते हैं, तो परवाह किए बिना कि लेआउट क्या है।

Answer 2

यह एक पूरक उत्तर है जिसमें वर्णित समाधानों के एक जोड़े के कार्यान्वयन को दिखाया गया है।

FractionallySizedBox

यदि आपके पास एक एकल विजेट है तो आप FractionallySizedBoxभरने के लिए उपलब्ध स्थान का एक प्रतिशत निर्दिष्ट करने के लिए एक विजेट का उपयोग कर सकते हैं । यहां हरा Containerउपलब्ध चौड़ाई का 70% और उपलब्ध ऊंचाई का 30% भरने के लिए निर्धारित है।

Widget myWidget() {
  return FractionallySizedBox(
    widthFactor: 0.7,
    heightFactor: 0.3,
    child: Container(
      color: Colors.green,
    ),
  );
}

विस्तारित

Expandedविजेट एक विजेट उपलब्ध स्थान को भरने के लिए, क्षैतिज अगर यह एक पंक्ति में है, या खड़ी करता है, तो यह एक कॉलम में है की अनुमति देता है। आप flexउन्हें वजन देने के लिए कई विजेट के साथ संपत्ति का उपयोग कर सकते हैं । यहाँ पर हरे रंग Containerकी चौड़ाई 70% है और पीले रंग Containerकी चौड़ाई का 30% है।

यदि आप इसे लंबवत करना चाहते हैं, तो बस इसके Rowसाथ बदलें Column।

Widget myWidget() {
  return Row(
    children: <Widget>[
      Expanded(
        flex: 7,
        child: Container(
          color: Colors.green,
        ),
      ),
      Expanded(
        flex: 3,
        child: Container(
          color: Colors.yellow,
        ),
      ),
    ],
  );
}

पूरक कोड

यहाँ main.dartआपके संदर्भ के लिए कोड है।

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("FractionallySizedBox"),
        ),
        body: myWidget(),
      ),
    );
  }
}

// replace with example code above
Widget myWidget() {
  return ...
}

Comments

कि कैसे आप एक StackOverflow जवाब लिखें! धन्यवाद! मेरी Dialogस्टाइल के साथ मेरी मदद की :)

— अलेक्जेंडर

Answer 3

यह थोड़ा और स्पष्ट हो सकता है:

double width = MediaQuery.of(context).size.width;

double yourWidth = width * 0.65;

आशा है कि इससे आपकी समस्या हल हो जाएगी।

Answer 4

आप लचीले या विस्तारित बच्चों के साथ एक कॉलम / पंक्ति का निर्माण कर सकते हैं जिनके फ्लेक्स मूल्य हैं जो आपके इच्छित प्रतिशत तक जोड़ सकते हैं।

आप भी AspectRatio विजेट उपयोगी पा सकते हैं ।

Answer 5

MediaQuery.of(context).size.width

Answer 6

ऐसा करने का कई तरीका है

1. MediaQuery का उपयोग करना: ऐपबार, टूलबार सहित आपके डिवाइस की पूर्ण वापसी

 Container(
        width: MediaQuery.of(context).size.width * 0.50,
        height: MediaQuery.of(context).size.height*0.50, 
        color: Colors.blueAccent[400],
 )

2. विस्तारित का उपयोग करना: आप अनुपात में चौड़ाई / ऊंचाई निर्धारित कर सकते हैं

 Container(
        height: MediaQuery.of(context).size.height * 0.50,
        child: Row(
          children: <Widget>[
            Expanded(
              flex: 70,
              child: Container(
                color: Colors.lightBlue[400],
              ),
            ),
            Expanded(
              flex: 30,
              child: Container(
                color: Colors.deepPurple[800],
              ),
            )
          ],
        ),
    )

3. दूसरों की तरह लचीला और AspectRatio और FractionallySizedBox

Answer 7

आप अपने विजेट के वर्तमान संदर्भ के साथ MediaQuery का उपयोग कर सकते हैं और इसके double width = MediaQuery.of(context).size.width double height = MediaQuery.of(context).size.height बाद चौड़ाई या ऊंचाई प्राप्त कर सकते हैं, आप इसे अपने इच्छित प्रतिशत से गुणा कर सकते हैं

Answer 8

पहले स्क्रीन का आकार प्राप्त करें।

Size size = MediaQuery.of(context).size;

इसके बाद आप स्क्रीन की चौड़ाई का 50% प्राप्त करने के लिए widthइसे प्राप्त और गुणा कर सकते हैं 0.5।

double width50 = size.width * 0.5;

---

लेकिन समस्या आम तौर पर आती है height, डिफ़ॉल्ट रूप से जब हम उपयोग करते हैं

double screenHeight = size.height;

हमें जो ऊंचाई मिलती है वह वैश्विक ऊंचाई है जिसमें StatusBar+ notch+ AppBarऊंचाई शामिल है। तो, डिवाइस की बाईं ऊंचाई प्राप्त करने के लिए, हमें paddingऊंचाई ( StatusBar+ notch) और AppBarऊंचाई को कुल ऊंचाई से घटाना होगा । यहाँ हम इसे कैसे करते हैं।

double abovePadding = MediaQuery.of(context).padding.top;
double appBarHeight = appBar.preferredSize.height;
double leftHeight = screenHeight - abovePadding - appBarHeight;

अब हम अपनी स्क्रीन का 50% ऊंचाई में प्राप्त करने के लिए निम्नलिखित का उपयोग कर सकते हैं।

double height50 = leftHeight * 0.5

Answer 9

यदि आप GridView का उपयोग कर रहे हैं, तो आप इयान हिकसन के समाधान की तरह कुछ का उपयोग कर सकते हैं।

crossAxisCount: MediaQuery.of(context).size.width <= 400.0 ? 3 : MediaQuery.of(context).size.width >= 1000.0 ? 5 : 4

Answer 10

LayoutBuilder विजेट का उपयोग करें जो आपको अड़चन देगा कि आप AppBar और गद्दी को छोड़कर ऊँचाई प्राप्त करने के लिए उपयोग कर सकते हैं। फिर एक SizedBox का उपयोग करें और LayoutBuilder से बाधाओं का उपयोग करके चौड़ाई और ऊंचाई प्रदान करें

return LayoutBuilder(builder: (context2, constraints) {
  return Column(
    children: <Widget>[
      SizedBox(
        width: constraints.maxWidth,
        height: constraints.maxHeight,
        ...