设置文本以匹配颤动中的列宽 [英] Set text to match column width in flutter

问题描述

我在一列中有一个图像和一个文本.我希望文本容器扩展到列宽，创建一个文本居中的黑色边框.

I have an image and a text in a column. I want the text container to expand to the column width, creating a black border with the text centered.

这就是我现在得到的.

代码.

List<Container> getMediaItem(List<Media> mediaItems) {
  List<Container> mediaContainers = [];
  for (Media media in mediaItems) {
    mediaContainers.add(
      Container(
        padding: EdgeInsets.only(left: 8, right: 8, bottom: 8),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            media.image,
            Container(
              color: Colors.black,
              padding: EdgeInsets.only(top: 8, bottom: 8),
              child: Text(media.title),
            )
          ],
        ),
      ),
    );
  }
  return mediaContainers;
}

如果你知道如何解决，请分享.

If you know how to solve it please share.

更新:完整代码(我正在尝试制作嵌套滚动视图以显示媒体项目库，例如 Netflix):

Update: The full code (I'm trying to make a nested scroll view to display a gallery of media items, like Netflix):

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Live Tree',
      theme: ThemeData(
        brightness: Brightness.dark,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Text("LiveTree"),
              Icon(Icons.check_circle_outline),
            ],
          ),
        ),
        body: HomePage(),
      ),
    );
  }
}

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {

    List<Column> getMediaItem(List<Media> mediaItems) {
      List<Column> mediaContainers = [];
      for (Media media in mediaItems) {
        mediaContainers.add(
          Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              media.image,
              Container(
                color: Colors.black,
                padding: EdgeInsets.only(top: 8, bottom: 8),
                child: Text(media.title),
              )
            ],
          ),
        );
      }
      return mediaContainers;
    }

List<Widget> getCategoryRows(List<CategoryModel> categoryModels) {
      List<Widget> categoryRows = [];
      for (CategoryModel category in categoryModels) {
        final mediaItemsForCategory = getMediaItem(category.media);
        categoryRows.add(
          ListView(scrollDirection: Axis.horizontal,
            children: mediaItemsForCategory,
          ),
        );
      }
      return categoryRows;
    }

    Widget gallerySection = Column(
      mainAxisSize: MainAxisSize.min,
      children: getCategoryRows(mockCategoryDataSet),
    );

    return Scaffold(
      body: ListView(
        children: <Widget>[
              gallerySection,
        ],
      ),
    );
  }

推荐答案

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    media.image,
    Container(
      color: Colors.black,
      padding: EdgeInsets.only(top: 8, bottom: 8),
      child: Text(media.title),
    ),
  ],
);

或

Column(
  children: [
    media.image,
    Container(
      color: Colors.black,
      padding: EdgeInsets.only(top: 8, bottom: 8),
      child: Center(
        child: Text(media.title),
      ),
    ),
  ],
);

这篇关于设置文本以匹配颤动中的列宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！