Установить текст, чтобы соответствовать ширине столбца в флаттере - PullRequest
Новая
       11

Установить текст, чтобы соответствовать ширине столбца в флаттере

0 голосов
/ 07 января 2019

У меня есть изображение и текст в столбце. Я хочу, чтобы текстовый контейнер расширялся до ширины столбца, создавая черную рамку с центрированным текстом.

Это то, что я получил сейчас.

enter image description here

код. 

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;
}

Если вы знаете, как решить эту проблему, пожалуйста, поделитесь.

Обновление: Полный код (я пытаюсь создать вложенный вид прокрутки, чтобы отобразить галерею элементов мультимедиа, например 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,
        ],
      ),
    );
  }

1 Ответ

0 голосов
/ 07 января 2019 
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),
      ),
    ),
  ],
);
...