flutter 使用中心微件将文本居中放置

lfapxunr  于 2023-02-09  发布在  Flutter
关注(0)|答案(2)|浏览(146)

问:没有使用中心小部件,标题"Daily"仍然是中心。如何操作?


下面提供的代码是如图所示的应用的UI,使用CarouselSlider进行水平滑动。

代码:

CarouselSlider(
                items: [
                Column(
                children: [
                Container(
                child: Text("Daily", style: TextStyle(color: Colors.white, fontSize: 20)),
                ),
                Expanded(
                   child: SingleChildScrollView(
                   child: Container(
                   margin: const EdgeInsets.fromLTRB(10, 10, 10, 10),
                   child: Text(data['daily'], textAlign: TextAlign.justify, style: TextStyle(color: Colors.white, fontSize: 17 )),
                                                  )),
                                              ),
                                            ],
                                          ),
                                          Column(
                                            children: [
                                              Container(
                                                child: Text("Weekly", style: TextStyle(color: Colors.white, fontSize: 20)),
                                              ),
                                              Expanded(
                                                child: SingleChildScrollView(
                                                  child: Container(
                                                    margin: const EdgeInsets.fromLTRB(10, 10, 10, 10),
                                                    child: Text(data['weekly'], textAlign: TextAlign.justify, style: TextStyle(color: Colors.white, fontSize: 17 )),
                                                  )),
                                              ),
                                            ],
                                          ),
                                        ],
                                    
                                    options: CarouselOptions(
                                      
                                      height: MediaQuery.of(context).size.height-300,                                      
                                      enlargeCenterPage: true,
                                      initialPage: 0,
                                      aspectRatio: 16/9,
                                      autoPlayCurve: Curves.fastOutSlowIn,
                                      enableInfiniteScroll: false,
                                      autoPlayAnimationDuration: Duration(milliseconds: 800),
                                      viewportFraction: 1,
                                    ),
                                  );
omhiaaxx

omhiaaxx1#

您可以使用列轴对齐更改这些属性

Column(
   crossAxisAlignment : CrossAxisAlignment.start
)
lymnna71

lymnna712#

这是由于ColumncrossAxisAlignment的默认设置(默认设置为center),您可以按如下方式覆盖它:

Column(
    crossAxisAlignment: CrossAxisAlignment.start, // <=== add this
    children: [
      Container(
        child: Text("Daily",
            style: TextStyle(color: Colors.white, fontSize: 20)),
      ),
      ...
    ],
  ),

更多关于crossAxisAlignment

相关问题