Блог

Главная - Вопросы по программированию - Как спроектировать стопку кнопок повышения и изображения в flutter

Как спроектировать стопку кнопок повышения и изображения в flutter

#dart #flutter

#dart #flutter

Вопрос:

Я новичок в Flutter, у меня есть требование, когда мне нужно разместить RaisedButton на краю изображения, как показано на скриншоте ниже (из соображений конфиденциальности я закрыл содержимое макета) введите описание изображения здесь

Я попытался изменить заполнение, но оно работает не со всеми устройствами на iOS и Android. Пожалуйста, помогите мне добиться этого для всех типов устройств, присутствующих в iOS и Android.

Ответ №1:

 class SO extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.orange.shade200,
      body: Stack(
        alignment: Alignment.bottomCenter,
        children: <Widget>[
          Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Image.asset('assets/images/pngs/cake.png'),
              SizedBox(
                height: 25,
              )
            ],
          ),
          RaisedButton(
            onPressed: () {},
            child: Text("sample button"),
          ),
        ],
      ),
    );
  }
}

дает
вывод

РЕДАКТИРОВАТЬ: один из нехаковых способов сделать это.

 import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  final sm = 100.0, lg = 200.0;
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      width: lg,
      height: lg,
      alignment: FractionalOffset.bottomCenter  
          FractionalOffset.fromOffsetAndSize(
            Offset(0, sm / 2),
            Size(sm, sm),
          ),
      child: Container(
        color: Colors.blue,
        width: sm,
        height: sm,
      ),
    );
  }
}

скриншот

Комментарии:

1. Большое спасибо, @Doc работал для меня.

2. @user1241241 Код довольно понятен. Просто базовая логика пользовательского интерфейса. Пожалуйста, укажите строку, которую вы хотите, чтобы я объяснил, и я отредактирую свой ответ.

3. @Doc Я хотел бы сделать панель инструментов складной и добавить вид прокрутки внизу. У меня возникли проблемы с пониманием того, как кнопка идеально закреплена посередине. Также, как я могу сделать панель инструментов складной: (

4. @user1241241 это хакерский код. на самом деле 1-й слой содержит изображение и интервал в столбце. расстояние регулируется так, чтобы оно составляло ровно половину высоты кнопки. 2-й слой стека содержит кнопку. Теперь выравнивание помечено как bottomCenter, поэтому расположение начинается с нижнего центра. Один из нехаковых способов упоминается в edit.

5. @Doc спасибо!! но он не работает, когда его виджет с отслеживанием состояния: (весь экран красноватый

Ответ №2:

Вы пробовали Stack в Flutter?