Я экспериментировал с Flutter, пытаясь воссоздать приложение, которое я написал для Android 5 лет назад. Но я не могу заставить макет работать очень хорошо. Я пробовал несколько разных виджетов, но каждый раз, когда я что-то пробую, мне кажется, что я делаю 2 шага вперед и 3 шага назад.
Приложение будет только в вертикальном положении.
- Простое изображение баннера вверху.
- Вопрос-пустяк.
- Группа радиокнопок с 4 ответами.
- Затем 2 кнопки - «Проверить ответ» и «Пропустить вопрос».
- Нижняя полоса
Я пытаюсь убедиться, что переключатели и кнопки не подпрыгивают при изменении вопроса.
И это код, с которым я борюсь.
Любая помощь или советы будут с благодарностью.
class _MyHomePageState extends State<MyHomePage> {
final TriviaBloc _triviaBloc = TriviaBloc();
TriviaQuestion _initTriviaQuestion = new TriviaQuestion('', '', '', '', '', 1, 1);
String _selectedAnswer = "";
TextStyle _answerStyle = new TextStyle(textBaseline: TextBaseline.alphabetic, fontStyle: FontStyle.normal, fontFamily: 'QarmicsansAbridged', fontSize: 16);
@override
void dispose() {
_triviaBloc.dispose();
super.dispose();
}
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.orangeAccent,
body: SafeArea(
minimum: const EdgeInsets.all(16.0),
child:
Column(children: [
ImageBanner("assets/header_2.jpg"),
Expanded(
child:
StreamBuilder<TriviaQuestion>(
initialData: _triviaBloc.getInitialTriviaQuestion(),
//_initTriviaQuestion,
stream: _triviaBloc.triviaQuestionStream,
//initialData: _triviaBloc.getInitialTriviaQuestion(),
//builder: (BuildContext context, AsyncSnapshot<TriviaQuestion> snapshot)
builder: (BuildContext context, snapshot) {
//_triviaBloc.getTriviaQuestion(snapshot, context);
if (snapshot.data != null) {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(height: 15),
Padding(
padding: EdgeInsets.all(2.0),
child: TriviaAutoSizeText(context, snapshot.data.Question),
),
RadioButtonGroup(
labels: <String>[
snapshot.data.IncorrectAnswer1,
snapshot.data.IncorrectAnswer2,
snapshot.data.CorrectAnswer,
snapshot.data.IncorrectAnswer3
],
labelStyle: _answerStyle,
onSelected: (String selected) => _selectedAnswer = selected),
//),
SizedBox(height: 10),
new InkWell(
onTap: () => {_triviaBloc.checkAnswer(QuestionAnswered(_selectedAnswer))},
child: new Container(
width: MediaQuery.of(context).size.width * 0.5,
height: 50.0,
decoration: new BoxDecoration(
color: _butttonInteriorColour,
//Colors.blueAccent,
border:
new Border.all(color: Colors.white, width: 1.0),
borderRadius: new BorderRadius.circular(20.0),
),
child: new Center(
child: new Text(
'Check Answer',
style: new TextStyle(
fontSize: 18.0, color: Colors.white),
),
),
),
),
SizedBox(height: 10),
new InkWell(
onTap: () =>
{_triviaBloc.getTriviaQuestion(snapshot, context)},
child: new Container(
width: MediaQuery.of(context).size.width * 0.5,
height: 50.0,
decoration: new BoxDecoration(
color: _butttonInteriorColour,
//Colors.blueAccent,
border:
new Border.all(color: Colors.white, width: 1.0),
borderRadius: new BorderRadius.circular(20.0),
),
child: new Center(
child: new Text(
'Next Question',
style: new TextStyle(
fontSize: 18.0, color: Colors.white),
),
),
),
),
],
);
} else {
return Center(child: CircularProgressIndicator());
}
;
}),
)]),
),
bottomNavigationBar: buildBottomNav(context),
);
}}
1 ответ
Итак, вы хотите, чтобы группа из 4 кнопок и 2 кнопки внизу не меняли своего положения?
Может быть, в этом поможет спейсер
if (snapshot.data != null) {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max, //replace this to fill everything
children: <Widget>[
SizedBox(height: 15),
Padding(
padding: EdgeInsets.all(2.0),
child: TriviaAutoSizeText(context, snapshot.data.Question),
),
Spacer(), //add the spacer here
RadioButtonGroup(
labels: <String>[
Похожие вопросы
Новые вопросы
flutter-layout
Макеты во Flutter - инструментарий пользовательского интерфейса Google для создания собственных скомпилированных приложений для мобильных устройств, веб-сайтов и настольных компьютеров из единой кодовой базы. Они относятся к классам, называемым виджетами, используемыми для создания пользовательских интерфейсов, как для элементов макета, так и для элементов пользовательского интерфейса. Макеты могут быть в форме виджетов с одним или несколькими дочерними элементами. Используйте этот тег для всех типов виджетов макетов, используемых в Flutter.