Блог

Я пытаюсь изменить расположение изображений в своем пользовательском интерфейсе, но они загружаются не так, как я ожидаю. Вот как они выглядят при горизонтальной прокрутке. И вот как я хочу, чтобы они выглядели вертикально

 Expanded(
                        flex: 3,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Expanded(child: Text("PriceList")),
                            Expanded(
                              flex: 4,
                              child: ListView(
                                shrinkWrap: true,
                                scrollDirection: Axis.vertical,
                                children: <Widget>[
                                  Container(
                                    margin: EdgeInsets.only(
                                        top: 8, bottom: 8, right: 12),
                                    width: 80,
                                    decoration: BoxDecoration(
                                        image: DecorationImage(
                                            image: NetworkImage(
                                                "https://i.pinimg.com/originals/d4/05/f9/d405f9671b3dd8e365dd97e50e801f86.jpg"),
                                            fit: BoxFit.cover),
                                        color: Colors.red,
                                        boxShadow: [
                                          BoxShadow(
                                              color:
                                                  Colors.black.withOpacity(0.1),
                                              blurRadius: 2,
                                              spreadRadius: 1)
                                        ],
                                        borderRadius: BorderRadius.circular(4)),
                                  ),
                                  Container(
                                    margin: EdgeInsets.only(
                                        top: 8, bottom: 8, right: 12),
                                    width: 80,
                                    decoration: BoxDecoration(
                                        image: DecorationImage(
                                            image: NetworkImage(
                                                "https://i.pinimg.com/originals/51/fa/65/51fa6566059dc396bb0867336affe718.jpg"),
                                            fit: BoxFit.cover),
                                        color: Colors.red,
                                        boxShadow: [
                                          BoxShadow(
                                              color:
                                                  Colors.black.withOpacity(0.1),
                                              blurRadius: 2,
                                              spreadRadius: 1)
                                        ],
                                        borderRadius: BorderRadius.circular(4)),
                                  ),
  

Я изменил направление прокрутки на вертикальное, но все равно оно не работает и выглядит так

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

 Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        padding: EdgeInsets.symmetric(horizontal: 20,vertical: 5),
        child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Expanded(
                  flex: 1,
                  child: Text("PriceList")),
              Expanded(
                  flex: 20,
                  child: ListView(
                      shrinkWrap: true,
                      scrollDirection: Axis.vertical,
                      children:List.generate(4, (index) => Column(
                          children:List.generate(4, (index) =>  Container(
                            height: 100,
                            margin: EdgeInsets.only(
                                top: 8, bottom: 8, right: 12),
                            width: double.maxFinite,
                            decoration: BoxDecoration(
                                image: DecorationImage(
                                    image: NetworkImage(
                                        "https://i.pinimg.com/originals/d4/05/f9/d405f9671b3dd8e365dd97e50e801f86.jpg"),
                                    fit: BoxFit.cover),
                                color: Colors.red,
                                boxShadow: [
                                  BoxShadow(
                                      color:
                                      Colors.black.withOpacity(0.1),
                                      blurRadius: 2,
                                      spreadRadius: 1)
                                ],
                                borderRadius: BorderRadius.circular(4)),
                          ),
                          )
                      ))
                  ))
            ]))
  

Просто.

1. Оберните код с помощью Listview . 2.Добавьте scrollDirection:Axis.Vertical