#android #flutter #dart
Вопрос:
Я новичок в Flutter, я хотел бы создать это
Поэтому я создал два виджета, один с колонкой 1 и его дочерний с колонкой 2.
Проблема в том, что я получил эту ошибку «дно переполнено бесконечными пикселями», несмотря на заданные высоту и ширину.
Не могли бы вы мне помочь, пожалуйста ?
Родительский виджет:
class LogingPage extends StatelessWidget { @override Widget build(BuildContext context){ var size = MediaQuery.of(context).size; return Scaffold( body: Container( width: size.width, height: size.height, child: Column( children: [ brandDisplayContent(), //buttonsDisplayContent(), ], ), ), ); } }
Дочерний виджет:
class brandDisplayContent extends StatelessWidget { @override Widget build(BuildContext context){ var size = MediaQuery.of(context).size; return Scaffold( body: Container( height: 450, width: size.width, padding: EdgeInsets.only(top:200), color: Color.fromRGBO(132, 119, 240, 100), child: Column( mainAxisSize: MainAxisSize.max, children: [ brandText(), littleTitleText(), ], ) ), ); } } Text brandText(){ return Text( "BRANDEE", style: TextStyle( color: Colors.white, fontSize: 45, letterSpacing: 8, ), textAlign: TextAlign.center, ); } Text littleTitleText(){ return Text( "Play to rise", style: TextStyle( color: Colors.white, fontSize: 18, ), textAlign: TextAlign.center, ); }
Комментарии:
1. Попробуйте обернуть столбец 1 с помощью SingleChildScrollView
Ответ №1:
Другой подход заключается в том, чтобы рассмотреть возможность использования расширенного виджета внутри столбца. Таким образом, вам не нужно получать размер, а просто установите размер в виде пропорции, используя свойство Flex.
Пример, чтобы примерно показать аналогичную компоновку…
return Scaffold( body: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ Expanded( flex: 3, child: Container( color: Colors.red, child: Column(children: [ Expanded( flex: 2, child: Container( color: Colors.red, ), ), Expanded( flex: 3, child: Container( color: Colors.yellow, ), ), ]), )), Expanded( flex: 2, child: Container( color: Colors.blue, child: Column( children: [ /// Repeat ], ), ), ) ], ), );
Ответ №2:
Определите высоту в процентах height: size.height * .6
Смартфоны имеют разное разрешение, и в таких случаях не используют фиксированную высоту.
@override Widget build(BuildContext context){ var size = MediaQuery.of(context).size; return Scaffold( body: Container( height: size.height * .6, width: size.width, padding: EdgeInsets.only(top:200), color: Color.fromRGBO(132, 119, 240, 100), child: Column( mainAxisSize: MainAxisSize.max, children: [ brandText(), littleTitleText(), ], ) ), ); }
и набор кнопок Displaycontent height: size.height * .4
Комментарии:
1. Это не работает, сри :/ У меня все та же проблема
Ответ №3:
Вы можете сделать что-то вроде этого
Scaffold( body: SizedBox( width: size.width, height: size.height, child: Column( children: [ Expanded( flex: 5, child: Container( width: size.width, padding: EdgeInsets.only(top:size.height*0.2), color: const Color.fromRGBO(132, 119, 240, 100), child: Column( mainAxisSize: MainAxisSize.max, children: [ brandText(), littleTitleText(), ], ) ), ), Expanded( flex: 3, child: Container( color: Colors.white, width: size.width, child: Column( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.center, children: [ Container( height: 50, width: size.width*0.6, decoration: BoxDecoration( color: const Color.fromRGBO(132, 119, 240, 100), borderRadius: BorderRadius.circular(50), ), child: const Center( child: Text( 'Button One', style: TextStyle(color: Colors.white), ), ), ), const SizedBox(height: 20,), Container( height: 50, width: size.width*0.6, decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(50), border: Border.all(color: const Color.fromRGBO(132, 119, 240, 100)), ), child: const Center( child: Text( 'Button Two', style: TextStyle(color: Color.fromRGBO(132, 119, 240, 100)), ), ), ), ], ) ), ), ], ), ), );